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 9 of 53 pages « First < 7 8 9 10 11 > Last »

The last part with the YOUR IMAGE URL did not post correctly.

<a class="thumbnail" href="#thumb">YOUR IMG URL

<span>YOUR IMG URL
</span></a>

<script type="text/javascript">
Drag.init(document.getElementById("book"));
</script>

Change width=80px to any size you want.

Posted by skydealer andy) on 10/11, 02:22 AM

dang - this site must have some sort of protection on the posting. I'll try it once more:

<a class="thumbnail" href="#thumb"><img XXX="YOUR URL HERE" width="80px" border="0" >

<span><img id="book" img XXX="YOUR URL HERE" style="position: relative" >
</span></a>

<script type="text/javascript">
Drag.init(document.getElementById("book"));
</script>
---------------------------

There - take the above clip and put your image name in teh YOUR URL HERE and then replace the XXX with src. I had to change "img src" to "img XXX" to get the code to properly post on here.

Posted by skydealer andy) on 10/11, 02:29 AM

Thank you, I love this tutorial! It even inspired me to create a nifty image rollover method that harkens back to ye old javascript MM_swapImage, but without all the obtrusive javascript. Using the visibility property (like you do above) is superior to the background-image property because it allows more flexibility by keeping the image references in the markup. (Click on my name to check out the tutorial.)

Posted by Meredith on 10/14, 05:10 PM

ive skimmed over the comments, but i dont see anyone having hte same problem im having- but the pop-up window that is the endlarged version of the thumb, isnt popping up right at the mouse icon, its popping up like an inch to the right, n this little inch matters to me cause of how i set up my website with limited space.
any clue?

Posted by Zeke on 10/15, 03:01 PM

is it possible to set the big image - that when u dont hover over the thumbnail the pic desapears - even if u hover over the big image?

Posted by Frikkie on 10/20, 05:53 AM

It's sort of simalar to the 'Light Box Veiwer'. Except the image is alraedy preloaded with this one, although it's not as fancy

Posted by Mitchell on 10/22, 02:37 AM

I'm having the same problem as Frikkie. I would like the large image to dissapear whenever the thumbnail is rolled-off of, rather than it remaining when you hover over the popup even if you're mouse is far from the thumbnail.

Another thing I'm having a problem with is, when using large popups, how to keep the popup within the boundaries of the user's browser window. Right now, if hovering over an image to the far right of the screen, the popup will simply load off the screen and force the user to scroll over to see it. Ideally I would like it to recognize when it breaks the boundaries of the window. Any way to do this?

Posted by Pete on 10/27, 11:18 AM

I am new to CSS and i loved your post. Beautiful outcome. Kudos!

Posted by jKwon on 10/30, 01:37 PM

I'm also very happy with this CSS-code. But I still want to find out how to decrease the traffic (only download picture on mouseover).

Posted by Ad on 10/30, 05:57 PM

Great script. I'm using just text rather than an image and it works fine, except that I have other links using the same class and the drop down text appears behind those hiding some of the text. Any thoughts on how to bring the popup forward? I tried setting a higher z-index under the 'hover' section but that didn't work.

Posted by dave on 11/02, 03:01 AM

Comment Pages 9 of 53 pages « First < 7 8 9 10 11 > Last »

Commenting is not available in this weblog entry.