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

finally i found what i was looking for :)
too bad this isn't working in IE :(
check out my site to see how i implemented this into smileys site :D i'ts very helpfull script/css/whatever ;)

Posted by smileys on 05/24, 07:13 AM

<marquee>It worked!<marquee>

Posted by happpy person on 05/30, 11:38 PM

I have the map of the world, and I want to show a different popup images for some of the countries. How can I use this script with hotspots for the world map?

Any help is greatly appreciated, thank you.

Posted by Laura on 06/02, 09:09 AM

Great code! Thanks.

My only problem seems to be with IE6, my three links (which have the image popup on mouseover), move all around the page. Works fine in IE7 and Mozilla, though.

Any ideas?

Posted by Kevin on 06/03, 08:37 AM

good work really ..
I n t e r n e t tech no logy

Posted by rosezar on 06/04, 04:47 AM

I am not a coder - I use dreamweaver - so how do I insert this and make this work? Very elementary here!

Posted by Sarah Haeder on 06/04, 06:37 PM

hi,
how can i integrate this image viewer to OSCommerce, is it possible to do for product images?
thanks

Posted by ergin on 06/07, 09:29 AM

I really like this code. And i was wondering if there is a away to get it for just text. For example this site has a popup login on the top right http://osx86leo4all.wikidot.com/

can someone help get this for my site but with just text.

Posted by Pedro Ramirez on 06/07, 03:20 PM

Hi, works fine, but i have one problem:

we want insert images wiht Links in the popup, but if i click on an image, popup will close!

How can i do it?
popup should not be closed when i click on image or link.

Mario

Posted by Mario on 06/08, 04:47 AM

Searching for a way to show my image from a text and i found this ^^
thanks

Posted by innocentwhite on 06/09, 10:58 PM

Comment Pages 36 of 44 pages « First < 34 35 36 37 38 > Last »