Dynamic Drive CSS Library- CSS Popup Image Viewer

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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 (528)

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

Page displays great in IE6 & Firefox, but the mouseovers only appear in firefox...NOT in IE6...

anyone have the css fix for that? is there a hack?

Marc

Posted by Marc Lazar on 11/15, 08:13 AM

This is great! Thank you!

Posted by Borislav Dopudja on 11/16, 04:57 AM

Good and usefull. But one thing. Can the larger picture link to the desired page also?

Posted by Toronto condominiums on 11/21, 01:02 PM

Fantastic alternative to slow loading javascript libraries. Many thanks!

Posted by Alp Bahar on 11/23, 11:38 AM

Excellent script!
Its really working nice. The only customization I need to do is in case the image is displayed at the bottom of the page then it keeps the blank space below the footer of the page since the span of the enlarged image is also get loaded while the page will be loaded.

Thanks!

Posted by CrossShore Solutions on 11/25, 11:06 AM

usefull, I agree

Posted by Craciunescu Sorin on 11/26, 12:24 AM

This works fine until you put images near the right edge of the page, then you need to scroll horizontally to see it.

Posted by Brad on 11/26, 08:57 AM

Thanks for the above code will test this out on my site

Posted by prestige car hire on 11/26, 10:07 AM

Is there a way to add a close button on the the hovered over (large) image?

If the large image covers content/links below you cannot select a link below unless you move off the large image.

Thanks tons!!!

Posted by Kristina on 12/05, 05:41 PM

Does anyone else notice that in Firefox if you have multiple images in a row vertically and you scroll down using a mouse wheel it will allow you to scroll far past the end of the page.

Posted by A.J. on 12/08, 02:51 PM

Comment Pages 44 of 53 pages « First < 42 43 44 45 46 > Last »

Commenting is not available in this weblog entry.