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

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 28 of 30 pages « First < 26 27 28 29 30 >

Please tell me how I can make this work onClick instead of on hover?

Posted by LISA TAYLOR on 07/04, 06:37 AM

I am doing this offline for now and it looks really nice. However, I cannot change thebackground color of the background. The font info from my style sheet worked fine but the background color doesn't. Any idea how to change it from white to the color that I want?
Thanks

Posted by Anne on 07/09, 11:46 AM

Hello,

You guys are great.However, how would I may this work on click, and have image remain until next image is click. Just a thought would love your input?

Thanks alot

Posted by Derek Horton on 07/13, 11:56 PM

is it just me or does no one know how to change mouseover to click operation to view images.....please please please someone explain this to us....this is a great little code and i congratulate the creator but please explain how to make this alter.....thank you very much....

Posted by Seamus on 07/15, 10:42 AM

is there a way to make the horizontal location set like the height? so if i have buttons on both sides of a page, they still load up on the same location.

i'm trying to figure it out but im totally new to CSS.

Posted by dan on 07/24, 07:15 AM

wait i figured it out, i just copy and pasted the style sheet and renamed it to thumbnail2 then i could change the offset horizontal pixels, wicked

Posted by dan on 07/24, 07:29 AM

Nice script, BUT... is there a way to have the enlarged image remain in place until the next thumb is activated? Basically, a permanent placeholder...?

Posted by chas devlin on 07/24, 11:42 AM

Is there a way to make the full-size image appear relative to the thumbnail, instead of in the same location on the page? Once I've scrolled down enough to see the last row of thumbs, the large picture is getting cut off at the top.

Posted by timepiece on 07/30, 10:33 AM

Thanks for the code, I am trying to validate it using the WDG HTML Validator, however it keeps complaining about the </a> here </span></a>

... ass="thumbnail" href="#thumb">
Error: element A not allowed here; check which elements this element may be contained within

Is there anyway to pass validation?

Posted by adrian on 08/01, 08:51 AM

this is amazing. I like the script so much.. thanks for the script.. check out it on my website..

thanks again...

Posted by bhagu on 08/14, 02:07 AM

Comment Pages 28 of 30 pages « First < 26 27 28 29 30 >