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

Social Media Applications

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

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 42 of 44 pages « First < 40 41 42 43 44 >

I get no larger picture pop up - I just get a dotted text box saying simply beautiful etc. with a little (picture not found type box).

Yes, I've changed the html to reflect the new pics location in my images folder.

Something in the css?

Appreciate the help.

Posted by Steve on 09/25, 12:22 PM

Hey. How do I make it so the pictures on the far right of my page don't disappear off the page? Is there a way to make it so They all appear on the center of the page?

Posted by Mitch on 09/25, 04:44 PM

thanks a lot....
my problem image span under my frame site so i can not see image span ?

how image span above my frame site ? maybe css in position it ?

thank a lot, send my email.

Posted by arif on 09/25, 08:02 PM

This is really cool, a animation in loading can make it more attractive, additionally a drag option will make this perfect for me. Thanks guys ;)

Posted by Sunny on 09/29, 12:01 PM

WOW - the implementation worked on the first attempt, this little bit of code is golden! thank you, 1000 times, thank you

Posted by Lisa on 10/03, 07:16 PM

Three questions:
1) How would you edit the styles if you wanted the enlarged picture to appear to the left of the image?
2) Is it possible to edit it so that the enlarged image will disappear as soon as you move off the thumbnail. Right now, the large image stays on the screen as long as the mouse is on the thumbnail or anywhere on the large image.
3) Is there a way to make your webpage length expand if the large image drops below the page? Currently, if one of the expanded images goes below the current length, it just runs off the page. It would be nice if the page length could lengthen when the image is there, and shrink when it is not.

Posted by John on 10/21, 06:37 PM

Hi,
I am building a not for profit animal conservation website, and I would like to use thumbnail images on
My site, but I don’t know how to use the codes on your site. I have tried pasting the codes on your site in the html editor on my website but it does not work.
1.Where do I insert my images in the codes?
2.How do I insert the images into the codes?
3.Where do I insert my text or info in the codes?
4.How do I upload the codes to make them work when the website is published?
Please reply the soonest, I would appreciate it greatly,

Sincerely,

Chukwu.

Posted by CHUKWU MEKOOS on 10/22, 04:01 AM

it's good but in Opera enlage image fly away from the pointer, can anyone help?

Posted by BoBka_altRUist on 10/24, 01:00 AM

wow! it's work correctly in Opera & FF & IE
when you insert in all elements in css
display:block;

Posted by BoBka_altRUist on 10/24, 01:22 AM

This works great! Thanks a ton!!!

Posted by Steve on 10/31, 07:21 AM

Comment Pages 42 of 44 pages « First < 40 41 42 43 44 >