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

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

Is it possible to use this with a prostores database? I cant figure out how to get my mouseover image to show up. Please emailsuggestions to me at cristy at mysweetmystique dot com.

Thanks

Posted by cristy on 06/11, 12:01 PM

So why is it that this thing works here in MSIE but when I try it on my own shiz with only the images changed, it doesn't?

Posted by Greg on 06/12, 12:33 PM

Hi!
I set up the code on my site, but how can I stick each picture to the same position? I would like to have the pictures shown always at the same place (top:410px left:530px) when I move the mouse to another text. [Now the picture's top frame is aligned horizontally (position: absolute; top: 0px; left: 350px;) to the text.]

Posted by Zsolt on 06/13, 12:51 AM

What I'm looking for: When I click to the text, an expanding "explanation" text slides down and the picture is shown at the right side. To the second click to the same text: the "explanation" text collapse, but the picture remains. and so on.. But, when I move to above another "active" text I'd like to see appearing the picture related to the text. (Check my page, then you'll understand my request.)

Thanks for your support and advices! :)

Posted by Zsolt on 06/13, 12:59 AM

FANTASTIC!!!!!!!!!!

Posted by Cy on 06/13, 07:28 PM

Great! Really simple to use and an awesome result. Thanks for sharing!

Posted by Michelle on 06/19, 01:04 PM

I've gone through all 37 pages of comments but still can't get the popup images to display where I want them in IE. They always open centered with and directly beneath the thumbnail. I want them to open in the top left corner of the window. It works perfect in Firefox, what's the deal with IE? It's IE7 with Vista. Any help would be greatly appreciated.

Posted by Jeff on 06/20, 10:18 PM

Can I use a hotspot on a images instead of a photo or text. How do I do it?

Posted by sod on 06/20, 11:38 PM

How i can open this popup box in to the bottom side?

Posted by digital designer on 06/21, 02:45 AM

Thank you so much! Very useful and aesthetically pleasing look for my portfolio page! =)

Posted by Heather on 06/21, 07:38 PM

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