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 46 of 53 pages « First < 44 45 46 47 48 > Last »

Hi Everyone. This is a really great script and i would really love to implement it for my gallery. I read almost the entire way through all the comments but i seem to be having a strange issue where the pop up image would appear under the thumbnails on IE 8 Beta. I ran this in Google Chrome and it worked fine with the same code. Can you guys give me any suggestions please?

This is the site: http://www.blahrt.com/test/portfolios/sportfolio/photo/page01/

Would really appreciate any help.

Posted by Serge on 12/31, 07:20 AM

I have this laid out and it worked on the first try! It's pretty amazing!

Here's my question:

The mouseover shows an intermediate picture and if you click on them in firefox or safari, it jumps to a new page (which is exactly what I want).

But in IE, this does not work, you have to move the mouse back to the small image to make it work.

Kraig
ragspur@hotmail.com
www.928motorsports.com/other928s.html

Posted by Kraig on 01/04, 05:57 PM

Please, please, please can someone help me!?

I've seen this question numerous times through all 46 pages of comments but still can't find an answer or even any suggestions on how to tackle it.

I'd like the pop-up image to disappear after I move my cursor out of the original thumbnail image. As it stands the cursor has to move outside of the enlarged image before it will disappear which unfortunately doesn't suit my requirements.

Other than that the code is absolutely perfect. Great job!

Posted by Jamie on 01/07, 04:34 AM

That is a great script...
<edo_infokom@yahoo.com>

Posted by edo on 01/07, 05:00 AM

@Jamie

I'm having the same issue but to no avail... I just can't figure it out... T_T

Posted by Jadie.Glitch on 01/12, 09:43 AM

Help! I've pasted in all the correct codes; updated them with the information I want, and the image is on the page. It's not hidden, then pops up when I roll over the text. Any ideas?

Posted by Renee on 01/13, 03:37 PM

Nice bit of scripting.. But how can we get the popup image to position the same in IE and Firefox?

Posted by Brad on 01/20, 03:52 AM

you can see the example on www.oludenizguide.com under hotels in oludeniz. i integrate it to make a map of the area and hotels. you see the map as thumbnails and than opens big...

Posted by Yusuf on 01/21, 03:31 PM

this is amazing, thanks so much for posting this... I know it isn't groundbreaking or anything, but its the simplest and most efficient code I've found that's easy to use. Thanks again for posting, I will definitely check out the rest of the site for more help.

Posted by ushkp6 on 01/21, 05:52 PM

I like this... Would be nice though if you could close the image from withing the script rather than having to hover elsewhere. Am currently using it with 5 thumbnails but it could increase to more so it may not be ideal.

Posted by Justin on 01/21, 08:19 PM

Comment Pages 46 of 53 pages « First < 44 45 46 47 48 > Last »

Commenting is not available in this weblog entry.