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 4 of 53 pages « First < 2 3 4 5 6 > Last »

I have blended this script whith the Dom drag&Drop; found at http://www.dynamicdrive.com/dynamicindex11/domdrag/ - and the images are now draggable - the working page is online at http://www.virgilio.org/errori_en.asp

Unfortunately, the area under the images is fixed, and I have not found a way to make it draggable with the image: if only anyone could solve this!

Posted by virgix on 06/14, 04:39 PM

How can we show the picture on the horizontaly and verticaly middle of the page?

Currently, the position of the picture depends of the position of the thumb.
I'm designing an online help and I would it appears everytime in the middle of the page.

Thanks!
Max

Posted by Max on 06/15, 02:28 AM

Great script, very easy to use.

My only question is - are all browsers able to use this? ((Sorry if I missed this somewhere!))

Posted by Wendy Kerr on 06/15, 12:31 PM

It`s very very good!

Posted by abc on 06/16, 10:18 AM

It's wonderful, of course. One problem though. I'm trying to use this in combination with overflow : scroll and it's fine in MSIE but in Firefox the large image disappears as soon as the mouse touches the scrollbar (which rather defeats my purpose). Any help?

Posted by Chuck Cavanaugh on 06/17, 05:34 PM

could you make it so it centers on your screen becuase if you scroll down half past the image and put your mouse on it you only see half of it.

Posted by james on 06/19, 01:31 PM

Nice script don't know where I could use it as a good function but it is cool.

David

Posted by David Decker on 06/20, 08:17 PM

hi, what if i want to use an image from someone else's website, so instead of a link "sushi.jpg", it will be something like "http://www.someoneswebsite.com/sushi.jpg"

is that possible?

Posted by jack on 06/24, 06:53 PM

hey guys, is there any way i can link the picture or even the text to a webpage? i would really like to do that, when the cursor goes over the text, the popup image appears and i can click on the text or image to go to a new webpage ...

thanx a ghazillion!!!!!!

Posted by john on 06/24, 08:27 PM

it seems that this css code renders funny safari as if there are layering problems as part of the image appears to be hidden by text which is actually below it. could it be a z-index problem. the whole thing works on ie and firefox

Posted by africanshox on 06/29, 10:31 AM

Comment Pages 4 of 53 pages « First < 2 3 4 5 6 > Last »

Commenting is not available in this weblog entry.