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 38 of 41 pages « First < 36 37 38 39 40 > Last »

i cant under stand how to put this....
its very nice but i cant able to put please help me!

Posted by manoj on 03/17, 04:06 AM

Works ok in IE 7.0.5730.13 on PC, but according to a friend the large images pop out to the far left in Safari, Firefox and Opera on a Macintosh...???

Posted by Bengt Stenstrom on 03/17, 06:41 AM

Re: CROSS BROWSER/SYSTEM PROBLEMS:

Solved the problem! Here's PART of the code - you'll find the full code if you "view source" on this page:
http://www.rubeo.se/tengstromj.html

PLEASE note the different "left" values!

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



</head>

Posted by Bengt Stenstrom on 03/18, 08:54 AM

Any ideas on why there is now a scroll bar with excess whitespace to the right of the page? example is at: http://www.sandstoneairnoise.com/services.html

I also posted here, but with no replies;
http://www.dynamicdrive.com/forums/showthread.php?t=42796

TIA!

Posted by ALS on 03/19, 08:59 AM

This is amazing. It's the first css/html "only" image gallery that i've seen that works flawlessly! THANKS!

Posted by Eli on 03/22, 01:10 PM

The code works great ... but the images do not overlay my next div section. Is there any code you are familiar with to correct the overlay - over the next div section below?

Posted by Shawn on 03/23, 06:11 AM

Has anyone successfully modified the code to show a full thumbnail instead of cropped? If someone can paste the code here will be great.
Thanks.

Posted by Narconon Vistabay on 03/26, 04:31 AM

is there a way to have a default image load in the container so there is not this hige blank space??

Posted by Chris on 03/27, 11:27 AM

How can I get the larger image to move down the page along with the thumbnail? I have the thumbnails aligning vertically on the left down the page but the larger image is staying up on top.

Posted by Marie on 04/01, 01:12 PM

This is great! Thank you!

Posted by Kirstie on 04/02, 03:31 PM

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

Commenting is not available in this weblog entry.