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

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 21 of 32 pages « First < 19 20 21 22 23 > Last »

Yet again, great stuff (as with single-image popup elsewhere on this site)!

FYI, for anyone who validates via W3jigsaw (with its background/foreground pickiness) and who have set up a CSS

A { BACKGROUND-COLOR: TRANSPARENT; COLOR #00C; }

...or some such ... it (the transparent background-color) will break this code in IE6!!!

(I just figured this out after a long day of grumbling...)

Posted by Albo on 10/31, 04:53 PM

Hello everyone,

Am trying to put some text next to the image.
Am using this script in a Books gallary. I want to put description of book next to the Book image.
Please some one guide me ,how can i put text next the Image.
For example :

In above Demo , below the first image "media/tree.jpg" an text displays as "Simply beautiful".
This "Simply beautiful" text must display in parallal with image.

Thanks.

Posted by RaviGH on 11/14, 12:26 AM

im new too ; && which one of the codes shown above do i have to put in my blog template ?

Posted by chocolatte on 11/14, 01:12 AM

Hi,
I like this a lot and tried to modify it into a thumbview with 6 lines (=12 thumbs). It still works, but it needs a layout with text height min. 200pix below. I'd like to place your ImageGallery including enlarged image between my headline and footer, with NO further text, but when I built it, there arised a lot of empty space below my footer.
Perhaps you have a tip for me?
Thank you.

Posted by Martina on 11/18, 02:38 AM

Hi, I was wondering if anyone knows how to make the large image display outside of a table.
What i'm trying to do is an image gallery that scrolls to the left or right using tables like in this web page http://www.villagephotos.com/help/gallerysample.asp
I'm just using a table with one row to display the thumbnails and would like to implement this script to pop up the large picture outside of the table.

I have it all set up, but when I hover over the thumbnail the large picture shows inside the table.
Thanks for the help.

Posted by Saul on 11/20, 09:50 AM

This is so perfect. It is a thousand times better than Javascript and ADA compliant!

Thank you so much for your wonderful work!

Posted by Carolyn on 12/05, 12:19 PM

Excellent CSS code! I have a question for the experts. Does the use of a smaller image for the thumbnail actually save on downloaded bytes? I'm suspicious that if you use the full image for the thumbnail, then the browser will only download the full image once (since it will presumably be cached). Adding a thumbnail in this scenario would actually be a decrease in performance. Any thoughts?

Posted by Ray on 12/08, 02:01 PM

Great coding. But how do I use text instead of thumbnails when hovering.
Also how do I make one of the large images show by default when the web page is opened.

Posted by Gary on 12/10, 08:12 AM

I love this gallery using Css.. but i have on small problem
I tried out the instructions and works well, but some of my pics are a large So, when i move the mouse away form thumbail, the larger image disappaers ( .. i know thats how its supposed to be)
<i>i want to reatain the large image When the " thumbail is clicked ".. </i>
..(when the user hover around the next tumbnail, the respective image must be viewd in large)

Is it possible to do this
I love this gallery-set
thank you soo much
Deepa

Posted by Deepa on 12/20, 08:05 PM

This program is exactly what I've been looking for, and it works great when I preview it on all the browsers except for IE. I work on a Mac and (as far as I can tell) it's not possible to get an upgrade anymore (I have 5.2.2). Is it just not working for me because of the IE version, or does it not work at all on IE? Please, please, does anyone have a solution, answer, hack, incantation or spell to solve this? Thanks!

Posted by Cara on 01/03, 02:27 PM

Comment Pages 21 of 32 pages « First < 19 20 21 22 23 > Last »