Simple CSS Mouse Over Image Gallery

Vor einigen Tagen brauchte ich eine simple Bildergalerie in der man mit der Maus über Miniaturansichten fährt und das entsprechende Bild in groß angezeigt bekommt. Auf der Suche nach einer entsprechenden Lösung fand ich jedoch leider nichts was mir wirklich zusagte. Zum einen wollte ich komplett auf JavaScript verzichten, zum anderen das Markup möglichst übersichtlich halten.
Im folgenden erläutere ich Euch die nun entwickelte Lösung.

Demo anschauen

Zum Hintergrund

Die Lösung ist außerordentlich simpel. Innerhalb eines < a >-Tags positionieren wir die Grafik des Thumbnails sowie ein leeres < span >-Element. Das < span > ist ausgeblendet und enthält über CSS die Großansicht als Hintergrundbild sowie feste Dimensionen. Beim Überfahren der Kleinansicht wird das < span >-Element mittels display:block eingeblendet.
Im HTML-Code tauchen nur die Miniaturen auf, da die Großansichten ja als Hintergrund via CSS definiert wurden.

XHTML

<div class="image-container">
 <div id="first-image">&nbsp;</div>
  <a id="image1" href="#"><img src="css-gallery-01_thumb.jpg" alt=" "/><span>&nbsp;</span></a>
  <a id="image2" href="#"><img src="css-gallery-02_thumb.jpg" alt=" "/><span>&nbsp;</span></a>
  <a id="image3" href="#"><img src="css-gallery-03_thumb.jpg" alt=" "/><span>&nbsp;</span></a>
  <a id="image4" href="#"><img src="css-gallery-04_thumb.jpg" alt=""/><span>&nbsp;</span></a>
  <a id="image5" href="#"><img src="css-gallery-05_thumb.jpg" alt=" " class="last"/><span>&nbsp;</span></a>
</div>

Der div-Container „first-image“ enthält über CSS das Bild, welches immer angezeigt werden soll. In diesem Fall das erste.

CSS

Der CSS-Code sollte selbsterklärend sein.

.image-container { /* main container. incl all elements */
 padding:0;
 width:600px;
 float:left;
 margin:0 0 10px 0;
 position:relative;
 border:1px solid #191b1f;
 background:#101114;
 padding:10px;
}

#first-image { /* first image - always in bg */
 position:absolute;
 top:10px;
 left:10px;
 height:580px;
 width:600px;
 background:url(css-gallery-01_large.jpg) 0 0 no-repeat;
}

.image-container a img { /* thumbs 1-4 */
 width:112px;
 height:108px;
 padding:0 10px 0 0;
 margin:590px 0 0 0;
 border:0;
 float:left;
}

.image-container a img.last { /* thumb 5. I don't use last-child to support ie-users. */
 width:112px;
 height:108px;
 padding:0; /* no right padding for the last thumb */
 margin:590px 0 0 0;
 float:left;
}

.image-container a span { /* hide spans */
 display: none;
}

.image-container a:hover span { /* display span if hovered */
 display: block;
 position: absolute;
 width: 600px;
 height:580px;
 padding:0;
 margin:0;
 top:10px;
 left:10px;
}

/* large images */
a#image1:hover span {background:url(css-gallery-01_large.jpg);}
a#image2:hover span {background:url(css-gallery-02_large.jpg);}
a#image3:hover span {background:url(css-gallery-03_large.jpg);}
a#image4:hover span {background:url(css-gallery-04_large.jpg);}
a#image5:hover span {background:url(css-gallery-05_large.jpg);}

Feedback und Bugfixing

Ich habe diese Galerie unter Firefox 2, Firefox 3, Safari 3.1 und Internet Explorer 7 getestet. Im IE 6 läuft ohne JS bisher noch nichts. Vllt. hat ja jemand eine Lösung. Sollten Euch Fehler auffallen so bitte ich dies hier zu diskutieren.

Update

Vera hat mir den gesuchten Code zur optimalen Darstellung im IE6 noch einmal per E-Mail geschickt, da es Darstellungsfehler in den Kommentaren gab. Getestet habe ich davon allerdings noch nichts. Also bitte wie gehabt: Feedback!
Nochmals vielen herzlichen Dank Vera!

<div id="bigpic"><img src="gfx/gallery/1_1_gr.jpg" /></div>
 <div id="thumbs">
  <ul id="gallery">
   <li id="bild-1-1"><a href="#"><span><img src="gfx/gallery/1_1_gr.jpg" /></span></a></li>
   <li id="bild-1-2"><a href="#"><span><img src="gfx/gallery/1_2_gr.jpg" /></span></a></li>
   <li id="bild-1-3"><a href="#"><span><img src="gfx/gallery/1_3_gr.jpg" /></span></a></li>
   <li id="bild-1-4"><a href="#"><span><img src="gfx/gallery/1_4_gr.jpg" /></span></a></li>
   <li id="bild-1-5"><a href="#"><span><img src="gfx/gallery/1_5_gr.jpg" /></span></a></li>
   <li id="bild-1-6"><a href="#"><span><img src="gfx/gallery/1_6_gr.jpg" /></span></a></li>
  </ul>
 </div>

<pre lang="css" line="1">
focus {
 outline:none;
}

#bigpic {
 height:300px;
 width:300px;
 margin:0;
 padding:0;
}

#thumbs {
 height:49px;
 width:300px;
 margin:0;
 padding:0;
}

ul#gallery {
 height:49px;
 list-style:none;
 margin:0;
 padding:0;
 position:relative;
 width:300px;
}

#gallery li span {
 display:none;
}

#gallery li {
 float:left;
 margin:0;
 width:50px;
}

#gallery li a {
 display:block;
 height:50px;
 border-right:#fff 1px solid;
 border-top:#fff 1px solid;
}

li#bild-1-1 a {background:url(../gfx/gallery/1_1_kl.jpg);}
li#bild-1-2 a {background:url(../gfx/gallery/1_2_kl.jpg);}
li#bild-1-3 a {background:url(../gfx/gallery/1_3_kl.jpg);}
li#bild-1-4 a {background:url(../gfx/gallery/1_4_kl.jpg);}
li#bild-1-5 a {background:url(../gfx/gallery/1_5_kl.jpg);}
li#bild-1-6 a {background:url(../gfx/gallery/1_6_kl.jpg);}

#gallery li a:focus span, #gallery li a:hover span {
 display:block;
 height:51px;
 position:absolute;
 right:0;
 top:-300px;
 width:300px;
}

#gallery a img {
 border:0;
}

#gallery li a span {visibility:hidden}
#gallery li a.current span,
#gallery li a:hover span {visibility:visible}
#gallery li a:hover{visibility:visible;}

Geschrieben von Jonas

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing