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

how can i make all the images appear in the same certain position on the page?

Posted by laurence on 06/16, 11:35 AM

unable to get this working in FF 2.0.0.14

any suggestions, this is exactly what I am looking for and it works great in IE

Posted by John on 06/17, 01:57 PM

I found the fix, and it was my error.

if you apply the gallercontainer to a table cell (td) and not to a div, it breaks in FF but not IE.

Thanks again guys, clean, clean CSS.

Posted by John on 06/17, 02:08 PM

yeah it was my mistake, i'd forgotten to put the div for gallercontainer. woops

Posted by laurence on 06/17, 09:39 PM

Is there a way of lining the thumbnails across the bottom of the page with the pop up larger image showing above them? Every method I try results in the connection being broken between the thumbs and the larger image.

Posted by Donna on 06/18, 11:23 AM

My gallery page includes 350 images and 350 thumbnails. Your script makes the loading and the display a lot cleaner than the bare-bones method I was using before. Many thanks for sharing your work.
MB

Posted by Mike Broussard on 06/23, 11:07 PM

Hello. (:
I want a code that can disable people to click on my pictures.Actually i put the code for disable left & right click but when i click on the pictures, it comes out to another link which people can save the pictures.
Do help, urgent.
Thanks alot, & i'm waiting for your reply as soon as possible.

Posted by Esther on 06/25, 10:30 PM

Hello. (:

I need help in here. I've actually put the disable left & right click code in my blog. But it seems it's not working. Cause when i click onn the pictures, it brings me to another which which enables people to save the picture. Which i don't want people to save my pictures. Can you help me as soon as possible. I urgently need help in this.

Thanks alot. :D

Posted by Esther on 06/25, 10:35 PM

ok i have a flash page from lovemyflash.com (myspace) is this script in any way compatible with it. (layout is text/css) and what do i have to change in these scripts to make it work correctly?

Posted by exodus08 on 06/30, 12:38 PM

hi,
how can i use such a script with the photos open only after clicking on them?
thanks

Posted by eli on 07/03, 01:42 AM

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