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 31 of 34 pages « First < 29 30 31 32 33 > Last »

Fantastic !

I love Dynamic Drive website

Posted by mmf on 10/27, 03:31 PM

Very usefull code! Thank you...

Posted by Nokia on 10/29, 07:09 AM

Thank you.

A great script for making a library!

Posted by Travel Image Gallery undefined Destination Guide on 11/03, 03:51 AM

Hello,

I really enjoy using this picture viewer code. Its very easy to use. I wanted to ask if there is a setting that would allow the image to appear in the center of the page. So if the window scrolled down about half way and the user browsed over the image, the large pop up image would appear on the center of the page. Thank You,

Frank-
fyounus99@gmail.com

Posted by Frank on 11/03, 11:39 AM

Hi, Thanks so much for the tutorial
It looks really cool when I tried it! But I have a problem and I don't know how to fix it..

When the image pops up it's always in the same position. Is there a way so that when I move my mouse over an image the pop up window will appear by the image selected??

The reason being I want a whole page of pictures, but if it stays at the top when I move down the bottom of the page, when I move my mouse over any image i won't be able to see it

URGENT! Please let me know as soon as possible please~~!

Thank you so much for the tutorial again^^

Posted by Ting on 11/05, 06:15 PM

hi,

Its fantastic effect...

I'll use it to create portfolio of our work...

Your site is having great resources, we'll learn a lot from it...

Thanks for sharing..

Synergy Informatics

Posted by Synergy Informatics on 11/07, 02:06 AM

Quite a few people have asked how to have a default image on the page before one of the thumbnails is activated. However I don't see an answer although I've read all 25 + pages. This is some advice I really need. Otherwise thanks for this handy code which I'm really enjoying.

Posted by M Johnson on 11/07, 05:56 PM

I need to know how to have a default image to the right of the thumbnails. Help anyone?

Posted by M Johnson on 11/07, 10:08 PM

Add this to the CSS to make the selected image "stay up":

.thumbnail:focus span {
visibility: visible;
}

Add this to the CSS (and remove the Hover Tags) to make it so you have to "Click" and not "Hover" to see the large images (This was posted by Sophie on page 30 - Thanks Sophie!!!):

.thumbnail:active img{
border:1px white;
}

.thumbnail:active span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 0px;
top:-345px; /*position where enlarged image should offset horizontally */
z-index: 50;
white-space: nowrap;
}

You can check out the source code and see what it looks like here (I used text instead of thumbnails):

http://www.dipuccio.com/dotnetnuke/Portfolio/tabid/55/Default.aspx

This works great BTW...Thanks to everyone who contributed!!

Posted by damian on 11/08, 07:29 AM

Somebody knows how put a text aligned under each image of the thumbnail?
i have try but it move all out and not under.

Posted by Clausto on 11/12, 06:01 AM

Comment Pages 31 of 34 pages « First < 29 30 31 32 33 > Last »