CSS-Bildergalerie mit Hover/Mousover

Einfache aber Wirkungsvolle Bildergalerie mit reinem Css, die nach belieben formatiert werden kannn.

Gefunden auf der Webseite von Stu Nicholls Cssplay Experimente mit Cascading Style Sheets

Die Idee ist eigentlich ganz einfach. In dem a tag befindet sich ein span tag. Standardmäßig ist dieser durch display:none; ausgeblendet. Bei Mouse-Over wird dieser sichtbar gemacht, absolut positioniert und mittels margin ausgerichtet.
Einziges Problem bei der Bildergalerie ist, dass durch die absolut positionierung des hover-bildes ein wenig Rechenarbeit von nöten ist.

Die Bildergalerie kann auch Vertikal ausgerichtet werden.

Bilder-Galerie
tool4web.de

Kurze Beschreibung

Das Css für die Galerie:

/* box ist der Behälter für Galerie */
#box {position:relative; width:550px; height:600px; background:white; margin:10px 5px;}
#box b { font-weight:normal; width:600px; text-align:center; position:absolute; bottom:250px; left:10px; color:#939393; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", verdana, sans-serif; letter-spacing:1px; line-height:1.7em; z-index:1; }
a.galerie, a.galerie:visited {display:inline; color:#727272; text-decoration:none; border:solid 1px #676767; width:75px; height:75px; float:left; margin:7px 10px; position:relative; cursor:crosshair;}
/* Tumbnail Bilder */
a.bild01 {background:url(01_tumb.jpg);}
a.bild02 {background:url(02_tumb.jpg);}
a.bild03 { background-image: url(03_tumb.jpg); }
a.bild04 { background-image: url(04_tumb.jpg); }
a.bild05 { background-image: url(05_tumb.jpg); }
a.bild06 { background-image: url(06_tumb.jpg); }
a.bild07 { background-image: url(07_tumb.jpg); }
a.bild08 { background-image: url(08_tumb.jpg); }
a.bild09 { background-image: url(09_tumb.jpg); }
a.bild10 { background-image: url(10_tumb.jpg); }
/* Ende Tumbnail Bilder */
a.galerie span { visibility:hidden; display:block; position:absolute; width:500px; height:400px; top:189px; left:2px; font-size: 12px; background:white; text-align:center; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", verdana, sans-serif; letter-spacing:1px; cursor:crosshair; }
/* Galerie Bilder */
/* -2px = abstand zu container */
a.bild01 span {left:-2px; top:180px;}
/* -100px = 1x tumbnailbild 75px + margin 20px + ca 5px abstand zu container */
a.bild02 span {left:-100px; top:180px;}
/* -195px = 2x tumbnailbild 75px + 2x margin 20px + ca 5px abstand zu container */
a.bild03 span {left:-195px; top:180px;}
/* -295px = 3x tumbnailbild 75px + 3x margin 20px + 10px abstand zu container */
a.bild04 span {left:-293px; top:180px;}
/* -390px = 4x tumbnailbild 75px + 4x margin 20px + 10px abstand zu container
auf diese art wird sichergestellt das die galeriebilder immer zentriert im container sind */
a.bild05 span {left:-390px; top:180px;}
a.bild06 span {left:-2px; top:89px;}
a.bild07 span {left:-100px; top:89px;}
a.bild08 span {left:-195px; top:89px;}
a.bild09 span {left:-293px; top:89px;}
a.bild10 span {left:-390px; top:89px;}
/* Ende Galerie Bilder */
a.galerie:hover {white-space:normal; z-index:100;}
a.galerie:hover span {visibility:visible; z-index:100;}
a.galerie:hover span img { position:relative; z-index:100; margin-top: 10px; margin-bottom: 10px; }
a.galerie:active span, a.gallery:focus span {visibility:visible; z-index:10;}
a.galerie:active span img, a.gallery:focus span img { position:relative; z-index:10; margin-top: 10px; margin-bottom: 10px; }

Und das HTML

<div id="box">
Bilder-Galerie <a href="http://www.tool4web.de/">tool4web.de</a>
<a class="galerie bild01" href="#"><img src="dokumente/css_bildergalerie/webgalerie/01.jpg" alt="Bild" title="Bild" /> Kurze Beschreibung</a>
<a class="galerie bild02" href="#"><img src="dokumente/css_bildergalerie/webgalerie/02.jpg" alt="Bild" title="Bild" /> Kurze Beschreibung</a>
<a class="galerie bild03" href="#"><img src="dokumente/css_bildergalerie/webgalerie/03.jpg" alt="Bild" title="Bild" /> Kurze Beschreibung</a>
<a class="galerie bild04" href="#"><img src="dokumente/css_bildergalerie/webgalerie/04.jpg" alt="Bild" title="Bild" /> Kurze Beschreibung</a>
<a class="galerie bild05" href="#"><img src="dokumente/css_bildergalerie/webgalerie/05.jpg" alt="Bild" title="Bild" /> Kurze Beschreibung</a>
<a class="galerie bild06" href="#"><img src="dokumente/css_bildergalerie/webgalerie/06.jpg" alt="Bild" title="Bild" /> Kurze Beschreibung</a>
<a class="galerie bild07" href="#"><img src="dokumente/css_bildergalerie/webgalerie/07.jpg" alt="Bild" title="Bild" /> Kurze Beschreibung</a>
<a class="galerie bild08" href="#"><img src="dokumente/css_bildergalerie/webgalerie/08.jpg" alt="Bild" title="Bild" /> Kurze Beschreibung</a>
<a class="galerie bild09" href="#"><img src="dokumente/css_bildergalerie/webgalerie/09.jpg" alt="Bild" title="Bild" /> Kurze Beschreibung</a>
<a class="galerie bild10" href="#"><img src="dokumente/css_bildergalerie/webgalerie/10.jpg" alt="Bild" title="Bild" /> Kurze Beschreibung</a>
</div>