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

Hello, I am trying to create a US Map on my page that people can click on to get to the site for their area. I want the states to "pop-up" slightly as the mouse is moved over them, I understand how html mapping is done, but do not have much experience with CSS. Can someone help me? Thank you.

Jacob Hejny

Posted by Jacob Hejny on 08/04, 03:57 PM

hi! can someone tell me how to change hover into click. i need the pics to enlarge when i click on them. the code is awesome, it works perfectly...but i need the click :)

thank you!

Posted by Ioana on 08/08, 12:37 AM

I am an amateur with CSS and need instructions of where to paste this to. (<head> or <body>) Can somebody help me?

Posted by Darla McKinstry on 08/11, 11:22 AM

kk so, im looking for somthing like this. But when the image is clicked it will open in the same window, but look like a popout to the user. And the background will be opaqe. AND make a loder tell the image downloads. Ohh and a close button xD

Posted by Brandon on 08/12, 12:31 PM

This CSS crashes IE7 but works fine in Firefox, I can't work out what is casuing the problem? shtml.dll is faulting on reading the HTML.

Anybody have any idea why..?

Posted by Darren on 08/15, 07:30 AM

it really works in page editor, but doesn't work in browser after uploading, it also showing picture with in the table which means the zoomed picture is showing half only can anyone help please...

Posted by mandeep on 08/17, 12:41 AM

to validate doc I began page with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
and each image needs to have an alternate name within the image tag
alt="picture of such and such"

for those really new to CSS
CSS source code goes just before the HEAD close and must be within <style type="text/css"> and </style> or you must reference an external style sheet.

Posted by jonna on 08/17, 07:12 AM

I'm having an issue with the AOL browser The URL is: http://www.360cash.com/profit_websites.html

This works like a charm in IE and Firefox. In AOL, the images are displaying directly under the thumbnails. I'm using a row in a table for the thumbnails. Any help working around this would be greatly appreciated. Thanks.

Posted by Sherryl on 08/18, 07:55 AM

can you send to my email, what i required...?
this is talk about friendster...

how to make the xhtml code for,
when someone view our friendster, there is emerge image primary foto in their friendster...?

thanks.
sefda

Posted by sefda on 08/23, 09:05 AM

Great code. I found this very useful on one of my sites.

Posted by counter strike maps on 08/26, 11:04 AM

Comment Pages 40 of 44 pages « First < 38 39 40 41 42 > Last »