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 41 of 53 pages « First < 39 40 41 42 43 > Last »

This is nice, and preloading would make it even better.

Posted by Craig on 09/07, 08:08 AM

How can I do this on Text Links? Thanks

Posted by Guru Geek on 09/07, 11:29 AM

Great Script!! Works perfectly. Is there a way to center the picture to the browser though?

Posted by Christy on 09/08, 08:50 AM

stylesheet2 because I also used the lightbox script and viewer.css because that's how I called the stylsheet i've made at the root of the folder.

Posted by Start a Petition on 09/15, 05:10 PM

Hi, The image popup viewer is very nice and I am using it on my site but its giving me problem with safari it overlaps with flash video and plus all of the site seems to be draging if anyone is scrolling the popup image. any tips or clues on this please.

Posted by naeem on 09/18, 01:19 AM

really great..
i was looking for the same in easy way and i got thanks..

i was using java script for this purpose now i can do it easily

Posted by Bibek on 09/18, 11:50 PM

I am really dumb.

How do I read the answers to the questions asked above.

I am just starting with html and need all of the help I can get.

Posted by jim allison on 09/24, 12:23 PM

I get no larger picture pop up - I just get a dotted text box saying simply beautiful etc. with a little (picture not found type box).

Yes, I've changed the html to reflect the new pics location in my images folder.

Something in the css?

Appreciate the help.

Posted by Steve on 09/25, 12:22 PM

Hey. How do I make it so the pictures on the far right of my page don't disappear off the page? Is there a way to make it so They all appear on the center of the page?

Posted by Mitch on 09/25, 04:44 PM

thanks a lot....
my problem image span under my frame site so i can not see image span ?

how image span above my frame site ? maybe css in position it ?

thank a lot, send my email.

Posted by arif on 09/25, 08:02 PM

Comment Pages 41 of 53 pages « First < 39 40 41 42 43 > Last »

Commenting is not available in this weblog entry.