Dynamic Drive CSS Library- CSS Popup Image Viewer

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

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 (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 25 of 53 pages « First < 23 24 25 26 27 > Last »

After working with this a bit, I found a way to both clean it up and make it so you can assign it to different divs and set the positioning relative to the div.

The original div --> #fifteen { width: 124px; height: 72px; position: absolute; top: 150px; left: 501px; }

Position for the popup span --> #fifteen span { position: absolute; left: -40px; top: 75px; z-index: 0; }

Modified code from above:
.thumbnail:hover{ background-color: transparent; z-index: 50; }
.thumbnail span { visibility: hidden; }
.thumbnail:hover span { visibility: visible; }

Works on all Windows Browsers (haven't checked other os's yet).
You can see it applied here: http://www.dreesredhothomes.com/redhot.php

Obviously this is not exactly what the script was intended to do, but I thought it might be helpful to others who are trying to do similar things to what I had to accomplish here.

Another side note I find important: positioning the span in the hidden state where you want it to be when it pops up gets rid of annoying scrollbars that scroll to hold all the invisible images.

Posted by Random Soup on 10/25, 06:10 PM

hi i use that css in my gallery bt that css not working in i.e. can u explain me what i do for.

Posted by pooja on 10/26, 04:43 AM

Yet again, great stuff!

FYI, for anyone who validates via W3jigsaw (with its background/foreground pickiness) and who have set up a CSS A { BACKGROUND-COLOR: TRANSPARENT; COLOR #00C; } ...or some such ... it'll break this code in IE6!!!

(I just figured this out after a long day of grumbling...)

Posted by Albo on 10/31, 04:47 PM

How do i get this to work on a image map? or do u recommend something better?

Posted by Ismael Burciaga on 11/05, 08:51 AM

Thanks for the post, this is quite helpful, I was trying to do so with Java, but aahh.. it was too confusing

Posted by Restless on 11/05, 12:00 PM

Hi,

Where can I find instructions on setting up basic CSS pages? Thanks in advance.

Mervin
mervinj@protocol1099.com

Posted by Mervin January on 11/11, 04:12 PM

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

Posted by Julian on 11/12, 02:29 AM

For those experiencing the IE7 z-index issue where the thumbnails show atop the zoomed image (or text links show through the zoomed image), you may wish to try this addition to the thumbnail:hover class:



.thumbnail:hover{

background-color: transparent;

z-index: 50;

direction:ltr;

}

Posted by James on 11/16, 07:38 AM

This script is working great for me, but it has a little trouble displaying in Opera. I don't know if it is because my information is in tables, and the cells are hiding the hover image when it pops up. Does anybody else have this sort of problem?

Posted by Travis on 11/19, 09:58 AM

Extraordinary, going to use this code, many thanks

Posted by Jagadeesh M on 11/23, 10:38 PM

Comment Pages 25 of 53 pages « First < 23 24 25 26 27 > Last »

Commenting is not available in this weblog entry.