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

Color Inspiration Tool

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

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 19 of 34 pages « First < 17 18 19 20 21 > Last »

Excellent gallery. Now, how do i get the thumbnails displayed inside an iframe (so I can scroll them up or down) and the big image on the container page? I have tried but the big image also appears on the iframe page.

thanks
Mkenya

Posted by mkenya on 08/22, 02:54 AM

i saw the code , its very easy, i like it. anyone can undetstand this code

Posted by Gurpreet on 08/22, 04:46 AM

I was having the extra space below the footer issue on my page (IE7) and couldn't fix it using any of the different tips in this forum. However, what worked for me was to put [B]bottom: 0;[/B] attribute in the thumbail span{ area. Hope this helps someone else. Thank you for the great code!

Posted by Phil on 09/04, 07:50 AM

Hi,

I don't know if this was answered, but is it possible to have the large image appear in a div tag seperate from the thumbnails i.e the thumnails are above in a cell and the picture is in a different cell, would I simply use a target?

Thanks,

Mark.

Posted by Mark Williams on 09/06, 07:36 AM

Dude - thank you. The most brilliant and simple piece of excellence I have come across so far.

Posted by Pete on 09/08, 03:58 AM

Great Work ! I really like this and hope to learn much from your site. Thanks alot :)

Posted by Hanan Ali on 09/11, 05:26 AM

If you look at my site, I am using this gallery for color samples of t-shirts. I am using several tiny thumbnails of a solid color that when hovered over, the large image of the actual shirt appears. Is there a way to use this code in a table and rather than using jpg or gifs for the small thumbnails, I would just have the cell of the table with a specific bg color be what you hover over? Hope that makes sense. The end goal is to make the page load faster and I would think that using bg colors in a table would load faster than 40 or 50 individual images. Any suggestions would be greatly appreciated!

Posted by Scott Jones on 09/20, 09:28 PM

Very nice, terse code (both examples, the gallery, and the other similar example elsewhere, for individual images).

My large gallery could be 80 images, but I guess it would be grossly inconsiderate to put them all on one web page.

So, while I rewrite, thanks! (Meanwhile, I have to figure out how to overcome my containing div previously defined as "overflow: hidden"!)

Posted by Albo P. Fossa on 09/25, 08:38 PM

SO I have got this to work in almost every browser, but for some reason the newest IE7 is not working. It just shows a little box where the large image should be popping up. Anyone else experience this? Is there a fix for IE7? A lot of people have said this works with IE7, is it just the newest version that is doing this? It would be awesome if someone could post on here an answer to this...it would be very much appreciated.. This is an awesome code, but if it doesnt work with IE7 I will not be able to use it for my clients. Thanks!

Posted by Seth on 09/26, 01:26 PM

OK... So I fixed the IE7 problem so now it works on all browsers that I have tried... Now a problem I am having is the Larger image placement on the page changes when the main browser window size is expanded or contracted. Is this a CSS parameter that I should be adjusting that I am missing?

Any input would be great!

Posted by Seth on 09/26, 04:24 PM

Comment Pages 19 of 34 pages « First < 17 18 19 20 21 > Last »