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 11 of 41 pages « First < 9 10 11 12 13 > Last »

I forgot to mention I changed this piece of code:

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: center;
left:250px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
it was originally "0" but I want the enlarged img to follow along when the visitor scrolls down on the page

Posted by Kurt aka Mutley on 12/28, 07:40 PM

Great tutorial!

I'm countering a major problem tho...
I need to use this in an iframe, and when I hover a thumb the big picture is not fully shown.

This is because the big picture does not go outside the iframe at all.

Please help me with this problem, I would be forever thankful, either mail me or reply to this :)

//Fredric

Posted by Fredric T on 12/30, 06:47 AM

Its really nice and its really help full . My question is if i want to make the large picture to be stay there. How i am gonna do that. For example when u click on the picture small picture and the large should stay there even if u move the mouse

Posted by Designer on 01/02, 12:41 AM

The script works really well - thanks!
But, I have a long list of thumbnails which allow the user to scroll below the fixed main image display. Is there any way to make the main image display adjacent to the relevant thumbnail or to maintain it's position relative to the browser top rather than the page top?
Thanks

Posted by Michelle on 01/08, 05:14 PM

Really nice code... I put it into a notepad document, added my own pics and captions, and saved it as an html file and it worked perfectly. However, when I put the code into myspace, it spaces the thumbnails out and makes room below each one for the enlarged image to appear. Then it doesn't even show the large image when the mouse is hovered over the thumbnail. I'd appreciate any help on this matter. If anybody would like to, they can email about this at Brandonmc4@verizon.net.

Posted by Brandonmc4 on 01/10, 07:08 PM

Hello there,

I'm using WordPress and can't seem to fathom how to use the CSS in the stylesheet that has to be used for the theme. Can someone help me? MSN is thesoulgirl at hotmail.com

Karen x

Posted by Soulgirl on 01/11, 03:08 PM

This is absolutely awesome. I've used the technique and modified it alil bit for my needs (a little fanciful, but it works wonders). Right here.

Great work! Keep it up!

Posted by narrowband on 01/17, 03:48 AM

I love this gallery! It's just lovely. I redesigned my client's gallery with this one instead! It's amazing how many users appreciate viewing the larger image on a hover instead of a link/new page. Thank you!

Posted by Jenn on 01/17, 04:58 PM

In Safari and FireFox/Mac (and perhaps others), there is a wider gap on the right hand side of the large image (the yellow area between the dashed outline and the solid bloue border of the image). Is there any way to remove the extra gap width on the right side?

Posted by Peter N Lewis on 01/18, 12:40 AM

How would you modify this so that the first image appears as default?
For example, currently when you open up the page, the thumbnails are shown, but no main image until you hover over a thumbnail. It would be good if the first image could be always set to visible even while not hovering.

It would also need to be compatible in IE6

Posted by Simon on 01/23, 11:37 PM

Comment Pages 11 of 41 pages « First < 9 10 11 12 13 > Last »

Commenting is not available in this weblog entry.