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 15 of 53 pages « First < 13 14 15 16 17 > Last »

SUPER FANTASTIC CODE.. Thank You So Much!
Just a note:
I added some properties in the .thumbnail style rules.. such as:

font-size:8pt;
font-family:Verdana, Arial;
color: red;
text-decoration: underline;
font-weight: Bold;

Makes the LINK look really COOL..

Cheers,
Bob

Posted by Bob Campbell on 02/17, 05:28 AM

Hi,

I was wondering if someone could help me out with the code. It works great in Firefox and almost perfectly in Netscape. For some reason it doesn't create the hovering outline around the whole image?

I pasted the Dynamic Drive example into my page just to test and theirs works fine.

What I do see though is that in my Dreamweaver the "<a class="thumbnail" href="#thumb">" isn't lighting up in green the way it should.

Can anyone help?

http://catalinahotel.com/pimpmyfridge/

Thanks!!!!

Allie

Posted by allie lopez on 02/18, 01:09 PM

hey, i have this problem with ie...it keeps adding like 5 px of space to the bottom of each of my sections when i put images! grrr! any suggestions? http://flashanims.com is what i'm working on.

Posted by austin on 02/19, 08:39 PM

i am implenting this on http://flashanims.com and it looks strange in ie6...i played with the z-index and stuff and it still wont work, i need some help with this...it works like a charm in firefox though :D

Posted by austin on 02/19, 08:54 PM

I like it so much very cool script.

Posted by Sim Kamasn on 02/23, 05:05 AM

The script works great and very simple to use. However i need to make the display image view vertically higher.

Posted by coffeecup on 02/25, 09:51 PM

Not sure if I can ask a question here, but I'll try..

I need to know how to get the value of a record using OnMouseOver..

Thanks inadvance..

Posted by Theo on 02/27, 01:41 AM

Thank you very wonderful

Posted by khalid on 02/27, 06:59 PM

Looks great, this is a great page to show to general users as a great css example!
Cheers,
Justin Frost
http://realstock.ca

Posted by Justin Frost on 03/02, 06:07 PM

Nice tip. I have been trying hard to find out dynamic applications of CSS.
Its Really usefull

Posted by Ningsuhen on 03/05, 03:53 AM

Comment Pages 15 of 53 pages « First < 13 14 15 16 17 > Last »

Commenting is not available in this weblog entry.