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

i couldn't load the larger photos on the correct position, every large photos appear on the same place, any idea?

Posted by freddie on 12/06, 11:03 PM

This demo page acts screwy in Opera 9.01 at 1440x900 res. The sushi and ocean images become activated by phantom links on the left (blank portion) of the page.

Also, the sushi image has a rectangular bite out of it on the lower right hand corner.

Posted by jscheuer1 on 12/07, 12:13 AM

I have not been paying attention to CSS over the past few years and cannot believe how concise this code was to perform this functionality. I was expecting a 100 line JS file. Amazing, thanks so much for the post. Is this supported in all the current browsers, I assume so. Thanks again

Posted by SpartanSoft on 12/08, 10:09 AM

Alrite, I'm trying to use this in conjunction with an iframe. Is there any way for the thumbnail to be inside the iframe and the hover pop up over everything?

Posted by Vincent on 12/08, 07:29 PM

How can I reposition the popup image so it will center above the mouse over image. See my site scroll to cooper and the our ad icon.

Thank you
Stoney

Posted by Stoney McGerald on 12/13, 07:55 PM

i have a question i want to be able mouse over an image and have it affair in the same spot so say i have 12 images on a page 4 images x 3 images and i want what ever image i mouse over to appear in the same spot

Posted by mk on 12/22, 10:04 PM

Hello,

Is there any way to keep a stable position of an enlarged image in Opera, IE, Firefox.

Seems to change depending on the browser i use
hmmmmm .......

Posted by search engine on 12/24, 07:32 AM

You're a life saver!! Muahhhsss!

Posted by Tini on 12/25, 04:09 AM

Although we could all easily read the W3 CSS documentation pages, perhaps some quick blurb or linkage to some text on playing around with the positioning of the images on the screen, such as for centering the images in the absolute center of the browser window, or allowing it to be positioned to the absolute left and right edges of the window, et cetera. Thanks :)

Posted by kanzure on 12/31, 05:59 PM

It is also possible to give the pictures a psuedo thumbnail look...



.thumbnail span img{

border-width:0;

padding:2px;

width:250%;

}

as in http://ask-father.com/?p=detail&id=96

hover over "View Attached Image" or click to view full image...

Posted by JMC on 01/04, 08:28 PM

Comment Pages 11 of 53 pages « First < 9 10 11 12 13 > Last »

Commenting is not available in this weblog entry.