Dynamic Drive CSS Library- CSS Image Gallery

CSS Library: Image CSS: Here

CSS Image Gallery

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 (289)

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 7 of 29 pages « First < 5 6 7 8 9 > Last »

I love this code and have it working but cannot figure out why I can't get it to work in IE. I have viewed the code on this page and mine is set up the same. Yet I must have something wrong. I am on wordpress which might make a difference but I just don't see how. And thougths?

Posted by Debbie on 10/23, 07:37 AM

this is so creative!
can you do this with text..?

say..instead of thumbnail images.

Posted by Verna on 10/23, 09:03 PM

i used it, but i can see the big and small image, without passing mouse over thumnail.

thanks

Posted by pooja on 10/24, 03:57 PM

This is the perfect solution to my troubles!

Posted by Krissie on 10/25, 08:20 PM

cool code. the page i use it on is www.oregonretirement.info
. i have a few questions:
the main one is on FF it works great but on IE the pictures dont pop fully to the front, it is placed behind some images. how do i make the enlarged pic come fully to the front? also how do i make the enlarged pic a link? i tried a different few different things to make it a link with no success. has any one of you guys got taht to work?
thanks
rich

Posted by rich on 10/29, 03:58 PM

What if u have more than 2 screens of thumbnails?
ie if u have to scroll down to the last image where will the enlarge image show?

Posted by Pinkpanther on 10/30, 07:12 AM

ok i dont know if i fully understand what you are saying. i gave a wrong link here is the page with the sponsored links that enlarge: oregonretirement

maybe this will give you a better idea of the nature of my problem.
thanks
rich

Posted by rich on 10/30, 08:12 PM

Hai everybody..pls help to make a CSS background in www.multiply.com account.Just a transparent pic or scenery or graphics or anything cool.I dont know to make it.So please send its CCS code to my mail.

Thank You

Posted by Nofi on 10/31, 07:12 AM

This image gallery shows big pic in same position(locked) -how can u have it displayed in a relative position to the active thumbnail.

Posted by Pinkpanther on 10/31, 07:38 AM

Posted by Nofi on 10/31, 07:44 AM

Comment Pages 7 of 29 pages « First < 5 6 7 8 9 > Last »