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 18 of 53 pages « First < 16 17 18 19 20 > Last »

I totally love this control but when I add long caption text to the enlarged image (as in example below), the text wraps to the width of the thumbnail. The only width setting I can find is the thumbnail's width, and I don't want to stretch that out. What can I do?

<a class="thumbnail" href="#thumb">
Images/KNO07230.JPG<span>
Images/KNO07230.JPG
Thumbnail example that uses both thumbnail and full-size imagesfrolm the same image.</span>
</a>

Posted by Matthew on 05/15, 10:29 AM

wow this is cool. better than lightbox

Posted by John on 05/15, 01:50 PM

i can read the coding but i still somewhat don't get it. what do i need to replace? and does the html work without the css?

Posted by greg on 05/17, 08:26 AM

Let me clarify my earlier question.

Let's say the tumbnail is 1 inch wide, and the larger image it brings up is 3 inches wide. The text that I add below it (let's call it a caption) wraps inside of a 1-inch wide space. In the example below, I deliberately added a large string ("Thumbnail example that uses both thumbnail and full-size imagesfrolm the same image.") to illustrate how this wrapping occurs.

What do I need to do in order to set the text-wrapping space's width to the same width as the image?

<a class="thumbnail" href="#thumb">
Images/KNO07230.JPG<span>
Images/KNO07230.JPG
Thumbnail example that uses both thumbnail and full-size imagesfrolm the same image.</span>
</a>

Posted by Matthew on 05/17, 09:14 AM

I was wondering if the site is not published yet (and I am creating it in FrontPage)will I be able to see the popup image viewer? (In either the preview mode or previewed in a browser?)

Posted by Michelle on 05/17, 01:46 PM

Not suitable for Opera 9*. Has phantom hot spots on the pages and often chunks of images missing. Dynamics own example has them on left white space.
If anyone has a workable solution for Opera, I'd really appreciate knowing?

Posted by sledger on 05/17, 03:41 PM

is there a way to make the image repeat?

Posted by Jen on 05/21, 08:37 PM

doesn't work for me guys :( copy/paste it but..no result only the words appear.

Posted by Radu on 05/26, 01:12 PM

pretty cool!

Posted by ray on 05/28, 05:02 AM

We won't be using it on the corporate site, but it worked great on IE 7.0.5x! Thanks!!!

Posted by Leonard Porrello on 05/29, 12:25 PM

Comment Pages 18 of 53 pages « First < 16 17 18 19 20 > Last »

Commenting is not available in this weblog entry.