Dynamic Drive CSS Library- CSS Image Gallery

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

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

Question Needs to be Addressed again: If one had a number of images, would it be better to use some sort of Javascript, rather than css. Seems with those large images that display when the thumbnail is rolled over will cause major size uploading issues for people on 56k modem.

nice script, but

Posted by Art on 03/14, 02:37 AM

Jason, size the images to around 450 wide constrained 'before' you upload them to the net ;o)

Posted by Soulgirl on 03/14, 02:45 AM

Who has 56k modem dial-up these days? LOL

Posted by Soulgirl on 03/14, 02:46 AM

What do you need to do so the enlarged image stays until you mouse over the next thumbnail...

Posted by Jennifer on 03/21, 01:38 AM

Left credits to your solution at:
http://www.featurepics.com/Editorial/ImageGallery.aspx

"You mention that the behaviour can be modified to show onClick. Could you tell me how, please?"

If you don't mind to use javascript - you can find a solution at
<a href="http://www.featurepics.com/Editorial/ImageGallery.aspx">A javascript based image gallery</a>

I left credits to "purely CSS based solution" - it is a great one!

Posted by Ajany on 03/24, 05:04 AM

Nice work....

Does anyone know how to do something similar to the file browser image hover that you see on www.istockphoto.com

http://www.istockphoto.com/file_search.php?action=file&text=horse&filetypeID=

Posted by MattC on 03/26, 11:37 AM

/* Classes used by popup box functionality */

.popupBox {
position: absolute;
visibility: hidden;
left: 0px;
top: 0px;
z-index: 200;
border: 1px #696969 solid;
background-color: white;
padding: 5px;
padding-left: 7px;
}

.popupBoxResponseMessages {
margin-top: 10px;
margin-bottom: 10px;
font-size: 1.1em;
font-weight: bold;
}

/* Definitions for specific implemenations of popup boxes */

#lightboxPopupBox {
position: absolute;
visibility: hidden;
width: 210px;
}

Posted by Soulgirl on 03/26, 12:08 PM

Don't understand how to display the larger images.

Do I need to create the larger versions in an art editor - if so what should I call them so the code recognises them?

I don't understand the comments in the thumbnail span statement
.thumbnail span{ /*CSS for enlarged image*/
What does this do and do I need to change the style to display the larger image?
A very basic set on questions!

Posted by david on 03/28, 04:12 AM

You use the <a class="thumbnail" href="£">£<span>£
Simply beautiful.</span></a> code to call the image you want to display. You only need one image on the internet and place that url where I have put a £ sign. The css code determines the size of the thumbnail and pop-up larger image (which is what you should have on the net). I would suggest having images no bigger than 450px wide :)

Posted by Soulgirl on 03/28, 11:01 AM

thanks for this. It looks wonderful! For those of you like me who were wondering how to keep the photos from moving when you resize the page, just make sure you place all your content between the <div class="container"> and </div> tags. Should work.

Lorie

Posted by Lorie on 03/28, 11:53 AM

Comment Pages 13 of 41 pages « First < 11 12 13 14 15 > Last »

Commenting is not available in this weblog entry.