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

Hey this is just what I was looking for! I've always seen this on websites and I was trying to figure out how to do it on mine. Thanks!

Posted by Acai on 05/20, 08:17 AM

I thank you very much for the easy to install CSS script. Very nice. And very unusual. I looked for 2 days for a function like this so you have my appreciation. OK now to a slight problem. The enlargments open too big, and the bottom ones become partially/almost all hidden from the viewer. Is there some way to control their size and/or reposition where they open? Maybe in the style sheet.
Please go to www.smittysignworks.com/specials.htm

Many thanks
Joy

Posted by Joy on 05/20, 04:33 PM

Hey - this is excellent script work. I'm new to CSS manipulation and am have one quick question about this design. I'm working on a portfolio image gallery and I would love to be able to mouse over like this to be able to see the images. Now, is there a way to get the full-sized file to always show up in the top right of the browser window no matter which image I roll over? I've gotten it to show up on the left side, but would highly prefer it showing on the right. Thanks!

Posted by Hilary on 05/20, 09:57 PM

This is are really nice bit of code.

Posted by David Giglio on 05/26, 12:33 PM

the enlarge picture display behind the text instead of the front. Can you help to fix it?
Thank much,

alyssa

Posted by Alyssa on 05/27, 10:06 AM

Can anybody help me here?

Posted by e8e8 on 05/29, 03:34 AM

Is it possible to change the "hover" effect to onclick just using CSS? Thanks.

Posted by Knika Salcedo on 06/01, 12:57 PM

thanx, ultimate tutorial it helped me a lot. really this site is exellent . i love it

Posted by shweta on 06/01, 11:00 PM

Thanks! I'm currently using the above codes, but I'm wonderign if it's possible that the hover effect happens when you actually click on the image.

Posted by Knika Salcedo on 06/02, 05:37 AM

Hai
Check the HTML for this example.

Very good

Thanking you
Siddaiah

Posted by Siddaiah on 06/04, 11:22 PM

Comment Pages 52 of 53 pages « First < 50 51 52 53 >

Commenting is not available in this weblog entry.