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

ok sorry I'm dumb I simply have to copy paste the whole thing in the head... thought I had to link to it...

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

This looks great, but there is some unintentional cropping in Safari. Also: what is the browser compatibility of this script?

Posted by Jacob Harris on 05/17, 10:07 AM

is there a way to offset the larger picture verticaly?

Posted by Patrick on 05/18, 06:49 PM

Very nice, easy to customize, and looks great!

Posted by Dominic L. on 05/19, 12:11 PM

very nice m8 gona add this to a clients website and my portfolio when its made!!!!

Posted by pstutz.com on 05/22, 06:13 PM

Hi

This is script that I have been looking for a while. Just on thing is it possible for the picture to scroll down as the pagemoves down

Posted by moris on 05/23, 01:51 AM

I can really say this is REALLY COOL!!! Two thumbs up man... !!! In cebuano AzTiGz!!!!!

Posted by Joshua on 05/23, 05:49 AM

I am using this on a page with TONS of links... Is there anyway to avoid the loding of the "larger" image until the link is hovered over?

For example I am using this to display a larger screenshot of a skin by hovering over a [view] link. It works great, however there are 106 skin options on the page and it appears to be loading all 106 larger images before dispalying all the rest of the page.

Posted by Jessy Hanley on 05/25, 04:32 PM

Nice script. Simpler than the other tooltips on this site I think. Two thumbs up!

Posted by Nathan on 05/29, 10:09 AM

Very inspiring!

What popups is actually a part of a link so you can click on it, something that is implemented in this demo.

In IE, elements with visibility:hidden are loaded. If you dont want to preload the images you may use display:none and display:inline.

As Nathan mentioned, it may be considered like a tooltip, a nicer tooltip.

For example, in a link to a product, you may popup its description, and/or a small thumbnail image.

Regards

Posted by Alejandro Lapeyre on 05/30, 03:45 AM

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

Commenting is not available in this weblog entry.