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 51 of 53 pages « First < 49 50 51 52 53 >

Does anyone have any idea how i can add this to my website?

Posted by Anomous on 05/01, 12:40 PM

Thank you, Eric, for your generosity. This simple tool is what will make my site pop in the eyes of my visitors. I cannot overstate my appreciation for your desire to help others. I also find many of the posters' comments educational.

Posted by Brian in NY on 05/01, 01:03 PM

I am very new at all of this and I am now quite confused. I am trying to make a popup on my home page, but when I enter the information it does nothing. What am I doing wrong? How can I customize this to show my popup? Please help a confused and wondering want-to-be techy.

Posted by Tina on 05/02, 01:56 PM

Hi, this is excellent code, simple yet effective. The only issue is that for galleries that span the page the large image shifts off the right of the page. Is there any way of showing it to the left of the cursor? I am guessing this might take some javascript if so I don't mind but if not then even better!
Many thanks

Posted by Gabriel Thornton on 05/05, 07:27 AM

Hi,

Since installing IE 8, the large popup image is behind the thumbnail. The Compatibility mode of IE8 has no effect. This seems to only occur in IE8 and not FireFox, Opera, Chrome, Safari or others.

The script is great. I have used it for a long time.

Thanks.

Posted by Ken on 05/05, 09:07 PM

I’ve already shared this page with a couple of friends now. Great find! Will be back often to check up on new information you put here!
Regards,
Gifts for Mother

Posted by For Moms on 05/10, 03:00 AM

Pretty cool CSS, though there's a small problem when hovering on the first thumb nail and trying to access the second one witout moving out of focus.

Posted by Peter on 05/11, 09:08 AM

When I load the page, the links do not scroll along with the content. HHEELLPP!!! :(

Posted by Roberto de NObrega on 05/12, 11:02 PM

Guillaumeb - you need to take the "2" off "stylesheet" - it isn't necessary. It will use any and all stylesheets referenced without having to differentiate them there. Just do

<link rel="stylesheet" href="viewer.css" type="text/css" >

:)

Posted by Dawn on 05/17, 11:45 AM

I'm having the same problem Ken on page 51 is having...

"Since installing IE 8, the large popup image is behind the thumbnail. The Compatibility mode of IE8 has no effect. This seems to only occur in IE8 and not FireFox, Opera, Chrome, Safari or others."

Help!

Thanks

Posted by Ed on 05/19, 03:15 PM

Comment Pages 51 of 53 pages « First < 49 50 51 52 53 >

Commenting is not available in this weblog entry.