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

This is how I fix the first image to stay put. When you mouseover, the background color of DIV covers this image, regardless of image size that is moused over. Works with IE6 & Ns 7.2.

<div class="gallerycontainer">

<div style="text-align:center;font-size:1.2em;position:absolute;left:343;width:470;height:470;">
newport.jpg
Newport Cemetery - Newport Ohio</div>

Posted by Jack Duffey on 04/05, 03:37 PM

This is a good aligned image preview. We will be including this in our next css gallery design! - Thanks <a title="CSS Gallery" href="http://cssgallery.com">CSS Gallery</a>.com.

Posted by CSS Gallery on 04/06, 03:55 PM

Thats awesome, exactly what I was looking for.

Posted by Hoteller i Berlin on 04/07, 02:41 AM

How do you force the enlarged image to stay in one spot even if the browser window scrolls down. The image is at the top of the screen and when Iscroll down it doesn't move down with me. I really like this script...thanks so much.

Posted by Shirley Dickie on 04/10, 02:04 AM

i want to put my css image gallery into a scroll box... what code do i need for the pictures to come out of the scroll box when i hover?

Posted by Alma on 04/15, 11:58 AM

I am getting everything on there, but when I preview the page, everything that is supposed to be hovering is next to the original image. Please someone am I putting the code incorrectly?

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb">http://getit-good.webs.com/undefined/37107.gif<span>http://getit-good.webs.com/undefined/37107.gif
Feed or water the wildest pooch in high style with this ceramic leopard-patterned bowl! 6 1/2" diameter x 2 1/2" high.</span></a>

<a class="thumbnail" href="#thumb">http://getit-good.webs.com/catalog/37082.gif<span>http://getit-good.webs.com/catalog/37082.gif
For the casual canine, a delightful ceramic food or water bowl with a polyresin blue jean design. 6 1/4" diameter x 2 3/4" high. </span></a>

</div>

Posted by Stevie on 04/22, 03:43 AM

Thanks for all the team of dynamic drive.

Posted by Manoj Rathore on 04/23, 01:08 AM

Is there a simple, or effective way of making the bigger image show up into another <div> layer?

I'm not very skilled nor am I inept, kinda just above an amateur web designer but just below the professional.

I basically want it to look similar to what I already have with my html code @ http://www.kazenracing.com/8into1.shtml

but without having to have separate pages for each 'larger' picture, otherwise by the time the site is actually completed there is gonna be hundreds of pages, and i don't want that. :D

Posted by Serosis on 04/23, 01:21 PM

Is there a hack around IE6 because the images don't show up on rollover in IE6... just the alt tag...

Posted by web_girl on 04/23, 03:32 PM

Well I know for a fact that some CSS hover overs and whatnots usually need some accompaning javascripts to work in IE6 remotely properly.

I went through that same deal with my dropdown menu and just said screw IE6 users, I am not using ugly code just to get one feature in there when it just as simple for the end user to upgrade their browser to one of the others that do support full CSS . IE7 has been out for a couple years now and even IE8 is out.

But don't upgrade to IE8, my god that one breaks a lot of sites.

Posted by Serosis on 04/23, 06:12 PM

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

Commenting is not available in this weblog entry.