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

Color Inspiration Tool

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 (457)

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

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

hey there
I'm not sure if u already answered this question but there it goes:

i want to add a flash publicity with transparent background over a html page but even when I put "transparent windowless" in the publish settings of my flash document it wont work...
(sorry if my sentence aren't complete, english is not my primary language)

Posted by véronie on 01/09, 08:41 AM

how can i do that the full image to appear on click NOT on mouseover the thumbnail?

Posted by Ionut on 01/09, 09:48 AM

ok i found what was the problem, IN dreamweaver I only needed to add "WMODE transaparent" in the swf parameters

Posted by Véronie on 01/09, 09:51 AM

Great script. Is it also possible to make a link to a new page from the thumb and/or the larger image?

But since the script uses the a-tag - maybe this is impossible?

Posted by Mikael Karlholm on 01/10, 02:48 PM

This is a great one. Is there any way we can add a preloading graphic while image loads?
Ref www.templatemonster.com Template previews

Posted by Mohi WebDesigner on 01/11, 01:15 AM

Hi I'm Cuban and I working in a project which I should use something like that, thanks very much.
That is the best site for CSS examples I been found.

greetings

Albert

Posted by Albert on 01/11, 09:24 AM

hi, excellent codes, just one thing.

im not sure how to get it to get the pictures to pop up to the right of the thumbnails?

anyone tell me?

cheers.

Posted by Brad on 01/11, 11:43 AM

I've used the code on this page and can'tget riud of the spacing. In the header script I have padding set to "0" and border="0", what else can I do to get rid of the spacing. Any feedback is appreciated

Posted by Ian Bailey on 01/14, 02:38 PM

Comment Pages 12 of 46 pages « First < 10 11 12 13 14 > Last »