Dynamic Drive CSS Library- CSS Image Gallery

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

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

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 30 of 32 pages « First < 28 29 30 31 32 >

Hi
I managed to change the hover into a click by adding this to the CSS code:
.thumbnail:active img{
border:1px white;
}

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

I removed the 'hover' tags as both creates an overlay of images.
Thank you to someone here on page or so of the comments for the tip of 'whitespace:nowrap' as that worked for me too.

Posted by Sophie on 09/26, 02:21 AM

This is a great css gallery!

Do you know how you can add the functionality of a click change instead of a hover change? Or do I need to add JS for that?

Posted by Belinda on 09/29, 08:51 PM

when i apply this, images are not displaying how can i do this better. Is there any code has been written for this............. Plz send me an email how could i do it

Posted by sai charan on 10/10, 03:42 AM

hello, great tool, but I need to implement a link to another web page as I do, someone can help me, thanks

Posted by Remisero on 10/13, 03:12 PM

I have extra space at the bottom of the page I just can't seem to get rid of since I added the above css and html code. Help would be highly appreciated! Thank you. Great code BTW.
http://www.topekametal.com/equipment.html

Posted by Tim on 10/14, 09:17 PM

GREAT!
1. Can the enlarged image be set to float at a fixed screen position as the page is scrolled by the user to get to more thumbs?

2. Is there a way to list my thumbs vertically but with smaller space between them [vertically]? The creates too much verical space.

Posted by joel on 10/17, 09:13 AM

well i got one question! will this work on myspace.com?

Posted by david on 10/17, 03:52 PM

Is it go in IE 6

Posted by Wetter on 10/19, 05:15 AM

This works well in Firefox, but not Internet Explorer. Have I gone wrong somewhere?

Posted by Lucy on 10/22, 04:22 AM

Hey!! thanks allot dear,

Your code works fine, you have saved alot of my work
I though of plugging a gallery using flash for which i needed to do alot of home work.

Surely you saved alot of time , Thanks for sharing this fine peice of code.

Thanks Dude :)

Posted by Srini shining on 10/26, 07:03 AM

Comment Pages 30 of 32 pages « First < 28 29 30 31 32 >