Dynamic Drive CSS Library- CSS Image Gallery

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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

thank you!!! this saved my project!@!

Posted by nappy on 04/26, 07:48 PM

why wont this work properly on Safari 4?

Posted by Dallas on 04/29, 03:21 AM

Initially works good, but it kicks the page left and formatting info would be appreciated for a noob.

Posted by Norman Porter on 04/29, 02:12 PM

i LOVE this code! One minor question? Is there a way to have the image 'fade in' and fade out verses just pop into my page?

THANK YOU!!!

Posted by Lynn on 05/05, 08:49 AM

This script is a beautiful thing. It takes a great mind to create something so simple yet so elegent.

Posted by phil on 05/12, 11:05 PM

Thnx for ur tips...can i ask u something..for ur info, i have a blog (blogger.com). but then, when i want to change the original image, i cannot find its source code in EDIT HTML. The original image still appear when i view my blog. When i [right click>properties] on image, i still can find its source code, but not in EDIT HTML. So, how to find the original image code in order to change its picture to new one.

Thank You for your help

Posted by publycenemi on 05/22, 03:15 AM

Hi All

I Love this Script - have been using it for sometime now, however i just did this page for a client and it works wonderfully on IE7,8 , Firefox and Chrome

The issue is that in IE6 it is not working, meaning the mouseover is not looking as if it is working and it is allowing the users to click the thumbnails and the larger images are being opened on a seperate page on the top lefthand side

Does any one have any ideas why? and if so how can i ensure that it works on IE6

I would really appreciate any assistance

Thanks
Umar
urmohammed@gmail.com

Posted by Umar Mohammed on 05/26, 10:06 AM

Hello,
I am trying to use this beautiful gallery as a model for my page and have trouble with the enlarged image popping up where ever, depending on the monitor size since its absolute positioning. I understand I would need to nest the AP element into a relative parent? I see the gallery container is relative, but the images seem not to be nested inside?
If you found a solution to this I would be really grateful.
Thanks
Miri

Posted by miriam on 05/27, 04:04 AM

Can u suggest an idea to incorporate this gallery with internet explorer 6 ?

Posted by sajeev on 05/30, 12:07 AM

The images are all loaded in the first. There is no use of javascript, just pure CSS. Great code, thanks a lot.

Posted by Think Flick on 06/02, 11:28 PM

Comment Pages 40 of 41 pages « First < 38 39 40 41 >

Commenting is not available in this weblog entry.