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 (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 48 of 53 pages « First < 46 47 48 49 50 > Last »

Do you know of a way to use your pop up image viewer on a photo. For example if I have a picture of 6 people, when I hold the mouse over their face a bigger pop-up imagae comes up.

Posted by tsc1896 on 01/27, 06:49 AM

I am using this and in IE the thumb is is a div with overflow set to auto when I scroll the div the thumb does not? It does however move back to possition when you hover it? FF does not like it and the bottom of the span stays inside of the scrolling div..

Any help or updates?

Posted by Pete on 01/27, 09:33 AM

Hey thanks for the code, just one quick tip I recently discovered using your wonderful code. in the CSS section ".thumbnail span" add the attribute "display:none" because if you try using this in a form there is a weird box that interferes with the tab index of the fields, and adding this eliminates this problem. Thanks again for tha code. . snakes

Posted by reptiles on 01/31, 06:01 AM

Put the CSS into the body of the page, not the head.

Posted by Amber on 02/01, 09:46 AM

I have to admit that it was a great piece of work, you made it so simple. I am loving it. Thanks

Posted by Ali Malik on 02/04, 08:11 PM

Hi

Great Code...but is there any way to get the magnified image to display outside the parameters of an iframe in which the thumbnail is held/displayed.

I can not in-large the iframe as there are control buttons in the vicinity, which the transparent iframe would cover and despite being visible, they would not function.

Z-indexing does not work as the iframe needs to be on one level and the magnified image needs to expand over the buttons in the vicinity on to a high level.

I would like to use css, currently using some old java script code. to create a pop up which is not ideal and looks bad...

Any ideas...?

Many Thanks

Posted by Glyn on 02/06, 04:24 AM

How can I make a text link pop up a small thumbnail image when the text link is hovered and then if the viewer clicks on the text link, it will bring up a larger image?

Posted by Don Jones on 02/07, 12:58 PM

Thanks you too much. This is wonderful, i am looking a for time this example. Thanks again.

Posted by Ajans on 02/08, 06:35 AM

My website is in Dreamweaver MX and in html. I have tried to copy and paste the html code but it doesn't seem to work. Is this because the code only works in CSS?

Posted by Cecilia on 02/13, 03:43 PM

I was thinking of looking up some of them newspaper websites, but am glad I came here instead. Although glad is not quite the right word… let me just say I needed this after the incessant chatter in the media, and am grateful to you for articulating something many of us are feeling - even from distant shores.

Posted by games on 02/15, 12:51 PM

Comment Pages 48 of 53 pages « First < 46 47 48 49 50 > Last »

Commenting is not available in this weblog entry.