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 10 of 44 pages « First < 8 9 10 11 12 > Last »

I am new to CSS and i loved your post. Beautiful outcome. Kudos!

Posted by jKwon on 10/30, 01:37 PM

I'm also very happy with this CSS-code. But I still want to find out how to decrease the traffic (only download picture on mouseover).

Posted by Ad on 10/30, 05:57 PM

Great script. I'm using just text rather than an image and it works fine, except that I have other links using the same class and the drop down text appears behind those hiding some of the text. Any thoughts on how to bring the popup forward? I tried setting a higher z-index under the 'hover' section but that didn't work.

Posted by dave on 11/02, 03:01 AM

Believe or not there are magic in that script

.thumbnail:hover{
background-color: transparent;

without that "transparent" line the sh*t doesnt work!!! and I dont have a m. clue why!

Posted by alex on 11/07, 07:08 PM

Hello, great script, but I need help with the width of the text line under the image.

In Mozzila the text lenght is the same as the image width, but in IE the text is at the fixed lenght (3 words loosely). How to fix that problem?

Posted by kugelis on 11/09, 09:33 AM

This is fine. but the pop up window that is containing the bigger picture is always coming at the bottom. what if we want to adjust that too dynamically like if the thumb nail, that is there is present at the bottom of the window, then the image should not come below the thumb nail but above it?

Posted by Ravi Kiran on 11/15, 08:43 AM

Well, i plugged the codes into Dreamweaver and i couldnt find out how to plug in my own pictures. Suggestions? All i need is the bvlow up of the pictures, not the text source to picture code. Thanks.

Posted by Greg on 11/15, 11:50 AM

Hi

Is there anyway that the image will stay in place until I click that next image.

At the moment when my curser leaves the image it disappears.

Any ideas?

Posted by kips on 11/18, 12:45 PM

Can anyone help?
We have a photo gallery of member photos. The photos all point to their member profiles. On added the CSS coding to a photo gallery, the enlarements are terrific the hyperlink from the photo to that members profile no longer works. Is there means to be able to have both the enlargements and the use of the hyperlink? John

Posted by John on 11/21, 12:01 PM

Can not get it to work on Myspace, it shows both images. Had to take it back off. Works fine in my editor, but not on here!

Posted by Steve on 11/22, 04:28 PM

Comment Pages 10 of 44 pages « First < 8 9 10 11 12 > Last »