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

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

Inconsistency with your code.

When I look at this page and hover over the example text & images, the pop ups work fine and the text caption on the pop up does not appear as an underlined hyperlink. However, when I copy the code and use it, the text in the popup image is always underlined as a hyperlink.

How can we make the text caption in the popup image NOT be underlined?

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

This works great, thank you! I'm going to use it for my inventory

Posted by Denver Used Cars on 04/21, 03:38 PM

I have three DIVs. The center DIV has the images/script. In IE it works fine, in FF the pictures are cut off... any suggestions?

Posted by PapaSteve on 04/21, 10:36 PM

Example of pictures cut off...

http://www.stansburyparkguitar.com/PixTeensClass.htm

Posted by PapaSteve on 04/21, 10:38 PM

Great script however I can't get the image clickable in Internet Explorer. It clicks fine in Firefox. Any suggestion appreciated! Thank you.

Posted by Joseph on 04/26, 06:47 AM

I used the above css code and it works great the way you have it layed out in the body. I tried to modefy it and use it in image mapping but I can't get the image to pop up. I attached my code below and the script in the head is just like above.
Please help.
Thank you

<body>

<IMG NAME="Gentek_Frame_0201" SRC="Excalibur/Gentek_0201/Gentek_Frame.jpg" WIDTH="500" HEIGHT="732" BORDER="2" USEMAP="#Gentek_Frame">

<map name="Gentek_Frame">
<a class ="thumbnail" href="#thumb"><area shape="rect" COORDS="96, 13, 393, 69" HREF="490042XX.jpg"><span>
490042XX.jpg
Head Expander: UI0050XX / 490042XX</span></a>

</map>

</body>

Posted by Masoud on 04/28, 10:49 AM

well am using this on ma site, in the shops to show item details. but for ppl who are using IE, the name of the items and pics doesn't seems to appear. do help me out?????!!!

Posted by Ahmed Sinan on 04/29, 08:04 AM

Hi, I very like this popup script and I tried to use in iframe and cannot support the iframe. How can I fix it?

Posted by Ami on 05/02, 06:28 AM

You can do this with just one image. just an :active and a :hover. When hovered re-size to original and even place it if you like on hover. Simpler code.

Posted by Johhny on 05/04, 09:42 AM

Can the code be changed so the window sits in a fixposition ie the middle of the screen?

Why do we get no answer?

Posted by Karen on 05/05, 07:22 AM

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