kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

34 Kommentare

  1. Ben

    Verfasst am 8. Juli 2008 um 6: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)

  2. Jonas

    Verfasst am 8. Juli 2008 um 7: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.

  3. Cörv

    Verfasst am 8. Juli 2008 um 15:49 Uhr.

    Super Sache. =)

  4. Ben

    Verfasst am 8. Juli 2008 um 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…

  5. Adult Ühler

    Verfasst am 8. Juli 2008 um 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.

  6. Jonas

    Verfasst am 9. Juli 2008 um 0: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 …

  7. Ben

    Verfasst am 9. Juli 2008 um 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… ;)

  8. Andris

    Verfasst am 14. Juli 2008 um 10:08 Uhr.

    Hab hier auch mal so was gebastelt:

    http://www.cube31.ch/erdgeschoss.php

  9. Doro

    Verfasst am 15. Juli 2008 um 13:21 Uhr.

    Genial!
    Danke!

  10. Tobias

    Verfasst am 16. Juli 2008 um 0: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

  11. Jonas

    Verfasst am 16. Juli 2008 um 7:44 Uhr.

    @ Tobias: Super! Freut mich sehr, dass Ihr Verwendung dafür finden konntet.

  12. Jens

    Verfasst am 17. Juli 2008 um 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

  13. Jonas

    Verfasst am 17. Juli 2008 um 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.

  14. Gärtner

    Verfasst am 18. Juli 2008 um 15:03 Uhr.

    Kann man das auch erweitern wenn man mehre bilder hat?

  15. Jonas

    Verfasst am 18. Juli 2008 um 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.

  16. Chris

    Verfasst am 22. Juli 2008 um 8:27 Uhr.

    GOIIIIIIL :)

    und weisste was? scheiss auf IE6!
    Wann starten wir endlich ne Kampagne um den auszurotten?

  17. Jan van Leeuwen

    Verfasst am 2. Oktober 2008 um 23:27 Uhr.

    Ein hervorragendes Design und danke für dieser Kode!

    Es inspiriert wenn mann solche Designs sieht.

  18. christiane

    Verfasst am 3. Oktober 2008 um 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

  19. Vera

    Verfasst am 14. November 2008 um 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

  20. Lea

    Verfasst am 25. November 2008 um 0:13 Uhr.

    danke jonas, ich habs grad mal ausprobiert. finds super ;)

  21. Jonas

    Verfasst am 25. November 2008 um 16:49 Uhr.

    @ Vera: Super sache! Dankeschön!

  22. Bettina Henkel

    Verfasst am 9. Dezember 2008 um 8: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.

  23. Jan

    Verfasst am 17. Dezember 2008 um 0: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 :/

  24. CT

    Verfasst am 21. Dezember 2008 um 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

  25. Jonas

    Verfasst am 21. Dezember 2008 um 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.

  26. Jan

    Verfasst am 29. Dezember 2008 um 18:23 Uhr.

    vielleicht könntest du ihr kurz ne mail schicken dass hier leute ihren rat brauchen? :)

  27. Jonas

    Verfasst am 29. Dezember 2008 um 19:25 Uhr.

    @ Jan: Hab ich gemacht. Daumen drücken ;)

  28. Vera

    Verfasst am 30. Dezember 2008 um 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

  29. Jonas

    Verfasst am 30. Dezember 2008 um 14:17 Uhr.

    @ all: Ich hab den Code von Vera als Update unter meinen Artikel gepostet. Danke Vera!

  30. Jan

    Verfasst am 31. Dezember 2008 um 1:01 Uhr.

    wow, danke an alle fürs netzwerken und wissen-teilen :) klappt jetzt auch im IE!

  31. Jan

    Verfasst am 31. Dezember 2008 um 1: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?

  32. Vera

    Verfasst am 31. Dezember 2008 um 13:18 Uhr.

    @Jan: jepp, für jedes Bild muß ein entsprechend kleines Thumbnail zuvor erstellt werden.

  33. Pawel

    Verfasst am 29. Mai 2012 um 15:29 Uhr.

    Hallo Jonas, großes Respekt für diese Seite.
    Aaaaber. Diese Lösungsmöglichkeit ist mir schon länger bekannt und ich finde sie nicht so schön, da man für eine einfache Galerie einen verhältnismäßig großen Aufwand betreiben muss.

    Ich bin gerade dabei eine einfachere und sauberere Lösung ohne span-tag zu erarbeiten. Sollte mir das gelingen melde ich mich hier wieder.

    Viele Grüße und weiter so!

  34. Doro

    Verfasst am 27. Juli 2013 um 10:06 Uhr.

    super, besten Dank, auch 2013 immer noch nützich

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.