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 21 of 53 pages « First < 19 20 21 22 23 > Last »

Great work for my website :)
thankx a lot

Posted by Yarn Shop on 07/01, 09:57 AM

I have added the css code, however my images are appearing too high on the page. What value do I use and where do I put it in the code to make the picture appear
across from the text link.

Posted by mike tabb on 07/04, 10:04 PM

Fantastic! However, I can't seem to get the enlarged images to appear over form selection coding. I've changed z-indexes and everything else I can think of.

Posted by Bruce Dunn on 07/07, 01:16 PM

Is there any way to make a link in the pop-up that triggers another pop-up?

Thanks.

Posted by Leslie on 07/11, 09:51 AM

This doesn't work perfectly on Safari. Here is what you should do (I put the directions in a comment).

.thumbnail{
position: relative; /* remove this line to make popup appear properly on Safari */
z-index: 0;
}

I also discovered that when the picture is on the bottom of the page scrollbars appear even if the popup is hidden. The following prevents this from happening (again direction in comments).

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden; /*replace this line with "display: none;" */
color: black;
text-decoration: none;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible; /* replace this line with "display: block;" */
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

Posted by Hanna on 07/13, 01:45 PM

Is it possible to make the popup to appear only when mouse hovers the thumbnail and NOT when it hovers the visible popup? So when the mouse hovers the popup but not the thumbnail the popup disappears? That would be very useful!

Posted by Hanna on 07/14, 06:38 AM

If you are seeing both images at the same time, you haven't imported the css properly from the external link. Try embedding the css directly into the page and then check your links.

Posted by Ian on 07/17, 04:06 PM

My popup is working as it is on the example. Let me try and explain it differently. Hover the thumbnail on this page. Then move your mouse directly from the thumbnail to the popup image. See? Now your mouse is not over the thumbnail, only on the popup and the popup is still visible. If you move your mouse away from the popup or the thumbnail, the popup disappears.

What I would like to happen is this. When I have hovered the thumbnail and made the popup appear and move my mouse over the visible popup, the popup would disappear. Is this possible? How?

Posted by Hanna519 on 07/18, 07:33 AM

How can I get the large images to load in the center and not offset to the left. I've tried every thing I can think of and I'm stumped! Thanks.

Posted by Jimbob on 07/21, 12:31 AM

Great post, I keep coming back again and again.

Is there a way to stop the text below the image to not have a line break ?

Posted by JasonM on 07/23, 08:49 AM

Comment Pages 21 of 53 pages « First < 19 20 21 22 23 > Last »

Commenting is not available in this weblog entry.