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

i will use it in my web page www.appleestate.co.uk and www.lyciandreams.com
very good idea and very usefull

Posted by Yusuf on 07/24, 08:01 AM

Thanks man,
just what I was looking for. Worked like a charm Thanks so much.

Posted by LinkDir on 07/31, 02:49 PM

This is what I was looking for. Thanks for sharing. I have added this site to my favorites and would definitely look forward for a new work!

Posted by Manish Pandey on 08/02, 10:43 PM

I don't know if this has already been addressed or not, but I noticed in Internet Explorer (6.0) that left position integer under the hover span element in the CSS determines how much room the caption text has.

I noticed this when it was set to 20 and all the words of the caption were on different lines. To fix it I simply gave it a higher integer or lower negative integer (to give the caption more space). Doing this also affects the position of the pop-up too (duh).

Also, some of the images kept shooting off the page whereas some of them were fine. To fix this, I made a new class for the problematic ones and changed the hover span position again.

This is really cool. It's a lifesaver. Don't worry, I gave you credit.

Posted by Treavor on 08/10, 04:07 PM

Thumbnail is visible as larger image in same table cell not offset to the right, also does not remian fixed upon scrolling the screen.

Works fine on my 15" widescreen (running IE 7)but not on 19" monitor at work (running IE 6).

Could you check the coding is correct or advise why it is not working at work but is at home please.

Regards

Posted by David Sproston on 08/15, 03:06 AM

Love the script; nice job!! I'm trying to change the horizontal position of the larger image when it pops up. Can you offer any help? TIA Michael

Posted by Michael Stewart on 08/15, 11:05 PM

I optimize for IE and Firefox and it bothered me that in IE the enlarged image appeared directly to the right of the thumbnail and in Firefox it was in the lower-right corner of the thumbnail. I liked how it looked in Firefox and wanted it to look the same in both browsers. Put this in place of the original script line:

.new:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
margin-top: 55px;
left: 55px; /*position where enlarged image should offset horizontally */
}

If you're not sure what I mean check out www.joshrodgers.com/portfolio.asp. Thanks,

Josh

Posted by Josh on 08/16, 02:52 AM

Adding a link. Is very easy, just remove the "#thumb" and place the actual link in its place. You will not have a link on the actual image that pops out, but you will have a link associated with the link tag used for the popup.

Original:
<a class="thumbnail" href="#thumb">Some Name<span>images/someimage.jpgSome Description</span></a>

With a Valid Link:
<a class="thumbnail" href="http://www.google.com">Some Name<span>images/someimage.jpgSome Description</span></a>

Posted by :) on 08/16, 01:32 PM

Hey im trying to add this and its just not working, being dumb, can anyone give me step by step??? :{

Posted by Nick on 08/17, 04:32 AM

Daniel,
Thanks for the fix. The only thing I didn't like about this cool tool was that my text was piling on top of itself. Your simple fix is great.
Mark

Posted by alloallo3 on 08/19, 05:13 PM

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

Commenting is not available in this weblog entry.