Dynamic Drive CSS Library- CSS Popup Image Viewer

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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 50 of 53 pages « First < 48 49 50 51 52 > Last »

Very nice script. Short and to the point. The pop-up image doesn't show up in Firefox. Any thoughts? Thanks again!!!!!

Posted by Brian on 04/06, 06:38 AM

Hi am new to this whole script thing, I was wondering if there is any simple way Using dreamweavers menu that one can achive this.

I have a templete that has a lot of Div tags and would like to place this feature to an image that is in a div tag that is placed in a Content Div tag is there any way one can help me step by step on how to do this

Thanx a million. { a video of this would be good if created}

Posted by terry on 04/06, 02:14 PM

Help !!! New to this How do I link this code to my picture on my server.

Posted by Bob on 04/06, 06:02 PM

I am new to CSS and HTML. I came across this tutorial looking for something else. This is awesome. I am building my own blog template for my jewelry design business. I wanted a gallery of my designs, I have already played with this coding and absolutely love it. The tutorial was very easy to understand. Thank you. Thank you.

Posted by misti k on 04/10, 10:12 AM

hi...like other postings, the enlarged images shows up even w/o hovering. help.

Posted by ari on 04/17, 01:18 PM

thi sis really useful.. but i there a way i can fix one position on my webpage for all my popup images. i have been trying to figure this our for a long time. In the above example the pop-up image moves along with the image. Cant the location of display of opo-up be constant on web page??????? please help

Posted by nikita on 04/20, 09:04 AM

This is great. Now, can something like this be applied to a single image with an image map, and a half-dozen pop ups? If so, how? I've been playing around with it for a while with no-joy. Cheers! Tom

Posted by Tom on 04/22, 06:55 PM

How do I get the images to show as the true image size? As it is now, the images we are using are 189x268 but they are only showing at 171x243 (which to some may not be a big deal) however our images have text on them and this small size loss makes the text very difficult to read.

Also, when you said that the images are embedded in the page, I assume they don't actually load off the server until mouseover, correct? I mean they are not loaded in the page but hidden until mouseover are they?

Thanks,

Posted by Westin on 04/26, 12:24 PM

For those of you saying that you can see both images at the same time, you are perhaps not pasting the code correctly. You are most likely messing up the <span> tag that must be there. It's the span that's hiding the larger image.

Posted by sam nospam on 04/30, 05:27 PM

Wow really nice infomation on css popup image viewer. Really fantastic and nice info. Thanks for sharing it.

Posted by coffee maker on 05/01, 02:57 AM

Comment Pages 50 of 53 pages « First < 48 49 50 51 52 > Last »

Commenting is not available in this weblog entry.