Dynamic Drive CSS Library- CSS Popup Image Viewer

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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 (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 23 of 53 pages « First < 21 22 23 24 25 > Last »

oh! it's very good style!I used to Javascript to show image like this page:www.chaukhe.com but i can't move my mouse over imageview.
This style is good solution for my problem.Thanks

Posted by Duc Manh Nguyen on 08/22, 01:23 AM

Hello,

How can this nice script be used in a wordpress theme?

GL

Posted by Lehrer on 09/04, 10:49 AM

Hello,
I own a dining and nightlife website and this feature is wondefrul for the event calendar section, (i will post the site once i figure out the problem i'm having). I use dreamweaver, and all the links i apply this css style to all appear on the top of my page within dreamweaver. They look fine when previewing the page in ie or firefox, but for when using dreamweaver the cells of the calander appear empty with all the links at the top of the page. Is there anything I can do?

Thanks
Dave

Posted by Dave on 09/05, 12:18 AM

is it possible to use this coding in an iframe and have the pop up image happen outside of the iframe?

Posted by Goran krstic on 09/11, 03:02 PM

Is there any way to do this??

I can't figure out how to use

an <area href="explan_popup.jpg" shape="rect" coords="775, 31, 967, 68">

for what they use..

<a class="thumbnail" href="#thumb">media/ocean_thumb.jpg<span>media/ocean.jpg
So real, it's unreal. Or is it?</span></a>

I think I'm on the right track..

"explan_popup.jpg" should be the img src

Posted by ted samsel on 09/12, 11:02 AM

Could any1 tell me how i would go about changing the size of the pop up box?

Posted by chantal on 09/15, 05:34 AM

Nice scripting man, but is there anyway I could make this "load" first.. Maby a cool loader and then it shows the picture when it has loaded finnished

Posted by Eray AYYILDIZ on 09/15, 04:09 PM

i got this to work fine in IE but in Firefox, the full size image is loaded and shown automatically under the thumb. so right now the thumb and the full size load automatically. anyone know what could be wrong? thank you

Posted by bill on 09/17, 08:03 PM

So lame that IE doesn't support this wonderfull things

Posted by David on 09/17, 08:46 PM

Is there any way to work the code around so that the image pops up when the mouse is over the THUMBNAIL, but that it doesn't stay up when the mouse leaves the thumbnail but is still over the popped-up IMAGE?

If you're not sure what I mean, try moving the mouse over the thumbnail from the top, then leave it from the top; the image appears then disappears.
But if you move the mouse over the thumbnail, then move it seamlessly over the image, even though the mouse has left the thumbnail, the image still remains because the mouse is over the popped-up image.

Is there any way to make it so that the image stays up ONLY when the mouse is over the thumbnail itself?

Thanks so much for your help!

Posted by Bob Cobb on 09/18, 08:13 PM

Comment Pages 23 of 53 pages « First < 21 22 23 24 25 > Last »

Commenting is not available in this weblog entry.