Dynamic Drive CSS Library- CSS Popup Image Viewer

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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 17 of 53 pages « First < 15 16 17 18 19 > Last »

Try setting the position of the image to fixed, Brent. Just browse a few comments up, and I have some instructions on how. horizontal offset is from the edge of the page, so if you are loading the images within a frame, it is from the inside edge of the frame, not the screen :)

Posted by Kat on 04/01, 09:04 AM

Beautiful script and best one I've found. Any tips/fix for Safari (Mac) where it doesn't work at all?

Posted by Lila Lam on 04/03, 10:03 AM

Very useful and easily done!

Posted by Nick on 04/08, 06:16 AM

Any word on whether you can set the larger images to link separate pages?

Thanks!
l.

Posted by Lahddah on 04/12, 07:37 PM

i really love how u did the pop up thing however how cna u also link it to another place liek a site..or somthing along those lines...please contact me at email given...hope u can help thank you so much

Posted by random htmler on 04/23, 04:35 PM

thank you, I have been looking for this script for a very long time. do you think its posible to use this same technique to show html insteady of an image. posibly bee used for reading a server side script using ajax

Posted by opad on 04/27, 02:41 AM

I have a problem with my site as it is flash and when I use this script the images are behind the flash movie, does anyone no how to fix this. In the top right of the site is a test image and you see what I mean. The scroller on the far right of the screen is what im going to us the script on. But it wont be the same image it will be screen shot of the player stats. www.jamclan.com.au

Posted by Julz on 04/27, 10:50 AM

script doesn't work properly on IE browsers with overlapping proper display problem when use css position:relative

.box {
position:relative;
margin:20px;
}
<div class="Box">

</div>
<div class="Box">Box A content</div>
<div class="Box">Box B Content</div>

Posted by Junny8 on 05/02, 11:40 PM

ok maybe I'm stupid, but not understanding the first question. Are you telling us that you need two of the same picture, thumbnail size and larger size? So it doesn't automatically make the original size pic into a thumbnail, or vice versa?

Wonderful idea though

Posted by mia on 05/04, 04:35 AM

Is there a way to "delay" the #thumb show?
I mean, in he Hover that will popup after 2 seconds and not inmediatelly. Thnks

Posted by MuTaY on 05/10, 02:03 PM

Comment Pages 17 of 53 pages « First < 15 16 17 18 19 > Last »

Commenting is not available in this weblog entry.