Dynamic Drive CSS Library- CSS Popup Image Viewer

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

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

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 33 of 44 pages « First < 31 32 33 34 35 > Last »

Need to put pictures inside tables, css hovers at upper left.
How do I make pop up stay close to thumb?

Best regards
Samuel

Posted by Samuel Robert Haugum on 04/01, 05:31 AM

I need to use this metod but calling the same record from a database in MySQL of the image were the mouse is over. Like when you call a record to another page (list.php?id=123) but I need to call it on the popup image viewer.

Thanks

Posted by Vicente on 04/02, 11:12 PM

Hi,
it works, however - All the text is wedged onto one side.
Is there any way of rectifyinf this?
Thanks!

Posted by Emma on 04/12, 08:13 AM

I tried this in frontpage - and I cannot get my pictures to load - please help.
http://www.apreciouspuppy.com/Availablepuppiesdesigner.html

thanks

Posted by Lindsey on 04/13, 04:18 PM

OK i had to change it to work asap.

but here is where the code is now:
http://www.apreciouspuppy.com/suzie/Availablepuppiesdesigner.html

Again I am working with Front Page, her site supports CSS and just cannot get it to work

Posted by Lindsey on 04/14, 04:46 AM

This script is Really Good! But,how do I remove the cropping that happens to the enlarged image when hovering over thumbnails in Safari? Sometimes it crops on the bottom and sometimes in the center of the enlarged image?

Posted by Pam on 04/14, 06:57 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 Tekstil Aksesuar on 04/14, 08:32 AM

I don't understand this:

<a class="thumbnail" href="#thumb">

what is the href="#thumb" ?????

Posted by Don on 04/14, 02:18 PM

Is there any way to adjust the size of the pop up image?

Posted by Don on 04/15, 10:49 AM

I figured out how to adjust pic size.

Posted by Don on 04/15, 01:04 PM

Comment Pages 33 of 44 pages « First < 31 32 33 34 35 > Last »