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

Hier könnt Ihr Euch die Demo-Version reinziehen.

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 30.12.2008

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!

Update: HTML (inkl. IE6 Support)

<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>

Update: CSS (inkl. IE6 Support)

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;}

Themenverwandte Artikel:

Folgende Beiträge könnten dich ebenfalls interessieren.

Dieser Beitrag wurde am 7. Juli 2008 in der Kategorie Resources, Tips 'n' Tricks, Tutorials, Webdesign veröffentlicht. Es wurden folgende Tags vergeben: CSS, HTML, Navigation, Usability

32 Reaktionen auf diesen Beitrag

Ben
8. Juli 2008, 06:38 Uhr
Hmph – hab jetzt 6 verschiedene Variationen ausgetestet, die allesamt in anderen Browsern funktionieren – die aber im IE6 jeweils an einem anderen der §$”/Q§$%”&” bugs scheitern.
Ich versuch’s nach der Arbeit weiter, jetzt muß ich aber los – komm jetzt schon 20min zu spät…
(Merken: Keine Blogs am Morgen lesen XD)
Jonas
8. Juli 2008, 07:26 Uhr
@Ben: bei meiner privaten Seite lasse ich IE6 User mittlerweile außen vor. Für gewöhnlich baue ich dann eine weniger schöne aber nicht hässliche oder unfunktionale IE6-Lösung ein.
Wer nicht up-to-date ist bekommt eben auch nicht das beste! So ist das immer, nicht nur im Netz.
Cörv
8. Juli 2008, 15:49 Uhr
Super Sache. =)
Ben
8. Juli 2008, 19:01 Uhr
@Jonas: Nachdem ich inzwischen beruflich garnichts mehr mit CSS zutun hab, sollte ich das vermutlich auch langsam – aber leider sitzt derzeit mein Das-muß-doch-zu-schaffen-sein! Ego am längeren Hebel. :P
Wobei es mich schon ziemlich wundert, daß noch gar so viele Leute überhaupt mit dem IE6 arbeiten – die “Auf neue Version upgraden?” Meldung hätte doch selbst für den größten DAU unmißverständlich sein sollen…
Adult Ühler
8. Juli 2008, 22:46 Uhr
Hi. I don’t speak your language, but I just had to drop in a note to say that this is the best designed site I have ever seen.
Jonas
9. Juli 2008, 00:03 Uhr
@Ben: Wenn ich nicht völlig hinterm Mond lebe, dann ist der IE7 noch nicht mit einem ServicePack ausgeliefert worden. Ich meinte das passiert mit dem kommenden SP3. Daher muss er momentan noch manuell installiert werden (zumindest über ein manuellen Windows-Update).
Und wer Windows nicht als Original besitzt klickt sicher nicht aufs Update :) das dürften einige sein …
Ben
9. Juli 2008, 23:52 Uhr
Wirklich? Ich bild mir ein, erst vor kurzem noch mittels Auto-Update genervt worden zu sein, der neue IE würde sich ja so unheimlich gerne auf meinem System installieren – ist mein Zeitgefühl tatsächlich dermaßen im Eimer und das war anno dazumal der Wechsel zu IE6?
(Ich werd langsam alt XD)
Hab jedenfalls jetzt eine unsaubere, nicht standard konforme, nur im IE funktionierende und fürchterlich zusammengeschachtelte Lösung.
http://ie6sucks.nathrai.de/ie6_css_gallery.html
Ist natürlich nicht alltagstauglich – aber hier gings ohnehin nur noch darum, mein angeknakstes Ego wieder zu kitten… ;)
Andris
14. Juli 2008, 10:08 Uhr
Hab hier auch mal so was gebastelt:

http://www.cube31.ch/erdgeschoss.php
Doro
15. Juli 2008, 13:21 Uhr
Genial!
Danke!
Tobias
16. Juli 2008, 00:49 Uhr
Vielen Dank.
Habe das glatt doch mal für unsere Vereinshomepage benutzt. Musste natürlich noch ein paar Dinge anpassen aber das ging dann auch leicht von der Hand.

Hier die Seite
http://www.badminton-vilsen.de/galerie.php
Jonas
16. Juli 2008, 07:44 Uhr
@ Tobias: Super! Freut mich sehr, dass Ihr Verwendung dafür finden konntet.
Jens
17. Juli 2008, 16:38 Uhr
Hallo Jonas,
also als “Kulturbanause” kann man Dich nicht bezeichnen. Mit diesem Theme wirst Du neue Maßstäbe setzen! :-)
Aber zum allseits “beliebten” IE6. Google mal nach “IE7.js”, und binde dieses Script von Dean Edwards mittels “Conditional Comments” ein. Das Teil ist einfach genial! Wenn nun ein IE5/6-User auch noch JavaScript abgeschalten hat, na dann kann man ihm nicht helfen.
Viel Glück,
Jens
Jonas
17. Juli 2008, 22:08 Uhr
@ Jens: Jau! Das sieht ja richtig gut aus.. ich werde mir das morgen mal in aller Ruhe zu Gemüte führen. Hatte ich bisher noch gar nichts von gehört.
Gärtner
18. Juli 2008, 15:03 Uhr
Kann man das auch erweitern wenn man mehre bilder hat?
Jonas
18. Juli 2008, 17:53 Uhr
@ Gärtner: Selbstverständlich. Es können beliebig viele Bilder hinzugefügt werden. Es ist auch nicht festgelegt wo sich die Thumbnails befinden. Also können diese auch links vom Hauptbild oder darüber positioniert werden.
Chris
22. Juli 2008, 08:27 Uhr
GOIIIIIIL :)

und weisste was? scheiss auf IE6!
Wann starten wir endlich ne Kampagne um den auszurotten?
Jan van Leeuwen
2. Oktober 2008, 23:27 Uhr
Ein hervorragendes Design und danke für dieser Kode!

Es inspiriert wenn mann solche Designs sieht.
christiane
3. Oktober 2008, 16:49 Uhr
hallo – erst einmal super vielen dank für die gründliche darstellung. das ding läuft, trotz meiner doch recht wenigen erfahrungen. ich stehe jetzt davor, meine bildergalerie in eine weitere seite einzubinden – welche möglichkeiten habe ich mit java – php ist mir absolut fremd… würde mich über tips freuen, christiane
Vera
14. November 2008, 18:06 Uhr
Bzgl. IE6: Habe meine li’s noch mit folgendem erweitert:
#gallery li a span {visibility:hidden}
#gallery li a.current span,
#gallery li a:hover span {visibility:visible}
#gallery li a:hover{visibility:visible;}
Der IE schluckts problemlos :)
grüsse
vera
Lea
25. November 2008, 00:13 Uhr
danke jonas, ich habs grad mal ausprobiert. finds super ;)
Jonas
25. November 2008, 16:49 Uhr
@ Vera: Super sache! Dankeschön!
Bettina Henkel
9. Dezember 2008, 08:38 Uhr
Ich sitze hier gerade in meiner Weiterbildung in Webdesign und bin von deiner genialen Seite einfach nur begeistert. Wollte ich nur mal gesagt haben. So als Anfängerin.
Jan
17. Dezember 2008, 00:59 Uhr
Hm, krieg das mit dem IE6 nicht hin, auch der Code von Vera hilft da nich, oder wo genau kommt der hin? Kann leider nicht auf IE6 verzichten :/
CT
21. Dezember 2008, 23:33 Uhr
Das Skript ist super, allerdings bekomme ich den Tipp von Vera
Zitat:
#gallery li a span {visibility:hidden}
#gallery li a.current span,
#gallery li a:hover span {visibility:visible}
#gallery li a:hover{visibility:visible;}

auch nicht gebacken. Wäre nett, wenn jemand mal so lieb wäre, und das genauer erklären würde, da in den Original-Skript gar keine “#gallery li”s vorkommen ???

Vielen Dank im Voraus
Jonas
21. Dezember 2008, 23:55 Uhr
@ CT: Ich hab den Tipp von Vera ehrlich gesagt noch nicht ausprobiert. Leider fehlt mir im Moment dazu auch die Zeit. Sorry.
Jan
29. Dezember 2008, 18:23 Uhr
vielleicht könntest du ihr kurz ne mail schicken dass hier leute ihren rat brauchen? :)
Jonas
29. Dezember 2008, 19:25 Uhr
@ Jan: Hab ich gemacht. Daumen drücken ;)
Vera
30. Dezember 2008, 13:19 Uhr
Huhu nochmal,

EDIT: Ich habe den gesamten HTML & CSS Teil ans Ende meines Beitrags verschoben. Gruß Jonas

“bicpic” ist das groß angezeigte Bild
“thumbs” sind die Miniaturbilder
“gallery” ist die Auflistung der Miniaturbilder

Hoffe, es hilft Euch.
Grüße aus Erftstadt bei Köln

Vera
Jonas
30. Dezember 2008, 14:17 Uhr
@ all: Ich hab den Code von Vera als Update unter meinen Artikel gepostet. Danke Vera!
Jan
31. Dezember 2008, 01:01 Uhr
wow, danke an alle fürs netzwerken und wissen-teilen :) klappt jetzt auch im IE!
Jan
31. Dezember 2008, 01:36 Uhr
achso, die thumbnails werden bei mir jetzt nur als ausschnitt in der entsprechenden größe angezeigt, d.h. das bild wird nicht auf zB 50x50px verkleinert, sondern es wird ein 50x50px ausschnitt aus der oberen linken ecke gezeigt…kann man wohl auch nich ändern, da man einem hintergrundbild ja keine größe zuordnen kann. also muss man für die thumbnails passende bilder erstellen, richtig?
Vera
31. Dezember 2008, 13:18 Uhr
@Jan: jepp, für jedes Bild muß ein entsprechend kleines Thumbnail zuvor erstellt werden.

Bitte kommentiere diesen Eintrag!

Dir hat dieser Eintrag gefallen, du hast Fragen, Anregungen oder Kritik? Hier ist Platz dafür. Jeder Kommentar wird ernst genommen und trägt zum Informationsgehalt meiner Seite bei. Also los!

kulturbanause blog