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

I had gone through this page coding.... Really it is very nice... I am new in css, it help me a lot..

Thanks

With regard
Rohinikant Prasad
India

Posted by Rohinikant on 01/19, 05:50 AM

It's a great set of code, except I can't get it to work in IE 6. Also, it is spotty in Safari (pop up images only appear partially). I'm sure this is because of some existing code in my page. I have a two column float left/right set up...anyone have any ideas as to why the pop ups don't appear in IE6. I tried the display instead of visibility and that didn't work either. Thanks!

Posted by Garrett on 01/20, 03:01 PM

Okay, I have a few questions. One, do you need to use BOTH the CSS and HTML code or one or the other? Two, whenever I do this (using JUST the HTML code) the image already is on the page. I want it to work like yours and appear when the user hovers over the text. How do I fix this??

By the way, this seems like an awesome program, if I could get it to work :)

Posted by Thomas on 01/23, 01:00 AM

this is pretty cool and fun and easy ..
it works with HTML
put I try it on WordPress and it's look ugly ..
=( so bad I like it

Posted by NeeArt on 01/24, 02:26 PM

Help...
I did a table with three images and three text links going horizontally and I am getting a wear distortion on the third text as I hover in the other two images and text...

Posted by pgt on 01/26, 05:22 PM

is there a way to make this css compatible with ie7 and ie6?

Posted by pgt on 01/29, 05:48 PM

I really like this script - lightweight and easy to do.

I am having a problem with the viewing of the larger images - in IE the large view hides behind the next row of images though in FF the boxes come forward.

I think it has something to do with the Z-index. Can anyone help me?

Thanks, Caryn

Posted by Caryn Maus on 01/29, 07:30 PM

Can you please send a two working files for css and html for that sample script image thnks.
Seems it is not working if i copy and paste the code..

Posted by trunks on 01/30, 02:51 AM

sorry it works now in asingle file

Posted by trunks on 01/30, 03:05 AM

I am using the following code and it works great in safari, ie and firefox but in ie I can not get the thunbnail hover to be linked so i have to go down to the thumbnail text to click, can anyone help... i am almost done with this great css file.

<HEAD>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#galleryimage {
position: relative;
z-index:0;

}

.thumbnail {
display:block;
font-family: Arial, Helvetica, sans-serif;
font-size: 13.5px;
color: #333333;
text-decoration: none;

}

.thumbnail:hover{
position:relative;

}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background: #ff8b34;
padding:5px;
left: -1000px;
border: 1px dashed #666666;
display:none;
color: #666666;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 8.5pt;
font-style: normal;
font-weight: normal;

}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding:2px;

}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
display:block;
top:20px;
z-index: 50;
left: 10px;

}

</style>
</HEAD>

Posted by pgt on 01/30, 12:52 PM

Comment Pages 13 of 53 pages « First < 11 12 13 14 15 > Last »

Commenting is not available in this weblog entry.