Dynamic Drive CSS Library- CSS Image Gallery

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

Advertise Here

CSS Library: Image CSS: Here

CSS Image Gallery

Author: Dynamic Drive

This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS's ":hover" pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it's possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn't support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.

Demo:

Simply beautiful.

So real, it's unreal. Or is it?

Sushi for dinner anyone?

Run wild with horses.
Dynamic Drive

Dynamic Drive
Zoka Coffee

Zoka Coffee

Note: Here the enlarged images are set to "overlay" any content that it may come in contact with. You can easily disable overlaying just by giving the gallery container (.gallerycontainer) a height set to that of the largest image's.

The CSS:

<style type="text/css">

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

The HTML:

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> 

<a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a>

<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a>

<br />

<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>

</div>

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (406)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 37 of 41 pages « First < 35 36 37 38 39 > Last »

The site isn't finished, but I put up the problem page so you can take a look.
http://www.sandstoneairnoise.com/services2.html
The second thumbnail I preserved the original size and it works. The rest I re-sized to 640x480 and just blow out to a large green box. :-/
Thanks for your help!

Posted by ALS on 02/17, 01:12 PM

ALS -

Give this a try - I see that your ginormous image that does show, the jpeg extension is capitalized, yet all the others our lowercase:

The image that shows -

img/services/Ferry Departing 2.JPG

the others -

img/services/EveryOtherImage.jpg

Yes, that does make a difference, believe it or not, I learned this the frustrating hard way too. So, check and see if your images' jpeg extension in your 'services' folder, whether they are a capital .JPG, or lowercase .jpg, and then change whichever it is, to whatever they are, in your gallerycontainer code.

Hope that is it and does the trick for you.

Posted by JPH on 02/17, 01:47 PM

Nope. No luck. I can't believe something so simple deletes the whole image. May I ask what are the dimensions of the pics you used in the example?
Thanks!

Posted by ALS on 02/17, 02:13 PM

Hahaha! I got it! They were showing up the whole time, but I just couldn't see them because I changed the hover span to the left instead of the right!
I'm still laughing at myself 15 minutes later!
Thanks so much for your patience!

Posted by ALS on 02/17, 02:24 PM

Yay! Good for you!

All the best to you!

Posted by JPH on 02/17, 02:27 PM

Thanks for this very nice script. The problem lots of user have commented, is that they want to place their hover image next to the thumb. Like as the example. But this doesn't work, despite having position:relative.

Well: i have the (simple) solution. Just implement the css code above your head opening in the html, and don't make an external stylesheet. Offcourse you can create and external stylesheet: but then its possible you have the problem as I described!

Good luck.

Posted by Elloro Design on 03/14, 08:36 AM

I thought this was working in IE at one point, but no longer. It works perfectly in firefox and opera. Can anyone help? I'm really new at the whole css thing, so I'm guessing by embedding the thumbnails and .gallerycontainer in other div elements may be creating the problem (inherited properties?).

http://www.bluelucystudios.com/gallery.html

Posted by Ryan on 03/16, 08:34 AM

Works on Windows IE, but lands on the left of where it should in Safari, Opera and Firefox on Mac.

Posted by Bengt Stenstrom on 03/16, 10:28 AM

(Sorry, wrong mailadress in last message)
Works on Windows IE, but lands on the left of where it should in Safari, Opera and Firefox on Mac.

Posted by Bengt Stenstrom on 03/16, 10:44 AM

Bengt Stenstrom - is your response referring to my post? I can't get any of the larger images to appear at all in IE on a PC.

http://www.bluelucystudios.com/gallery.html

Posted by Ryan on 03/16, 11:40 AM

Comment Pages 37 of 41 pages « First < 35 36 37 38 39 > Last »

Commenting is not available in this weblog entry.