Dynamic Drive CSS Library- CSS Popup Image Viewer

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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 53 of 53 pages « First < 51 52 53

my images are appearing in the upper left corner- not by the appropriate image. how can i fix this?

Posted by kendall on 06/05, 12:12 PM

For everyone who is having problems with where the large image gets displayed when you hover over the thumbnail.

.mapthumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -150;
left: -150px; /*position where enlarged image should offset horizontally */

the top and left attributes tell it where to show the large image relative to the thumbnail....so if you want the image to display in the middle of the page you just mess with these numbers....and use negative values to make it move left or up

Posted by schmooot on 06/11, 11:48 AM

I like very much, but I fear that the page will be heavy, because the browser have to load not only all the thumbnails - obviously - but also all the enlarged images...I like this a lot. But I found that if you want to protect your graphics and what-not, this dosen't work, which I was hoping it would. The picture toolbar keeps poping up on the images, and you have to disable it:( But it is very usefull and takes up little room.

Leather Sofa

Posted by Leather Sofa on 06/11, 02:45 PM

Thanks, just what i needed. And its woking.

Posted by Hildiid on 06/12, 06:29 AM

Comment Pages 53 of 53 pages « First < 51 52 53

Commenting is not available in this weblog entry.