Dynamic Drive CSS Library- CSS Popup Image Viewer

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Image CSS: Here

CSS Popup Image Viewer

Author: Dynamic Drive

Enable arbitrary links or image thumbnails to pop up an enlarged (different) image onMouseover by using this CSS code. With the help of CSS's ":hover" pseudo class, combined with relative and absolute positioning, the enlarged images are simply included on the page as normal HTML, "popping" up on demand. CSS is behaving more and more like scripting!

Demo:

One of my favorite foods is sushi
Doesn't this look good?, and it's good for you too! Coffee and sushi probably don't mix well, but I like some Zoka Coffee
Zoka Coffee to boot! Here are some thumbnails from my trip to La la land:

Simply beautiful.
So real, it's unreal. Or is it?

The CSS:

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.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 on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

The HTML:

<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 />
<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>

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (524)

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 1 of 53 pages 1 2 3 > Last »

are the larger photos on the page? and then shrunk to thumb size? dynamically loaded? or are all photos in layers and preloaded?

Posted by mark hill on 05/08, 11:54 PM

Hi Mark:
Check the HTML for this example- the thumbnails and enlarged images are two different images, though both embedded directly inside the page as normal HTML.

Posted by ddadmin on 05/09, 12:21 AM

Nice scripting man, but is there anyway I could make this "load" first.. Maby a cool loader and then it shows the picture when it has loaded finnished :)

Posted by Alexander on 05/09, 11:21 AM

Is it possible that with IE 6.0, when the text below the image is a long text, the "popup" is very large, and exceed the screen on the right?
Instead with FF the "popup" is just the image width!

Posted by Maurizio on 05/10, 07:06 AM

the enlarged photo isn't hidden at all! it is shown instantly even when not hovered :(( help

Posted by chris on 05/11, 02:23 AM

How can I add a drop shadow to the popup?

Posted by Mike on 05/11, 07:18 PM

Can the larger picture link to the desired page also?

Posted by David Finley on 05/13, 09:25 AM

Really good and useful

Posted by John di Stefano on 05/15, 11:27 AM

OK i'm new to this. I understand i have to copy/paste the code in the first part in a CSS file and that the second part of the code is for the body of my page.
Now how do you link to a CSS in the HEAD of the page??

I've put :
<link rel="stylesheet2" href="viewer.css" type="text/css" />

stylesheet2 because I also used the lightbox script and viewer.css because that's how I called the stylsheet i've made at the root of the folder.

Can anybody help me here?

Thanks a lot

Posted by Guillaumeb on 05/16, 05:12 PM

precision:
I currently see the thumbnail and the larger picture side-by-side as if the dynamic gesture was not active

Posted by Guillaumeb on 05/16, 05:16 PM

Comment Pages 1 of 53 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.