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

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 16 of 44 pages « First < 14 15 16 17 18 > Last »

Thank you very wonderful

Posted by khalid on 02/27, 06:59 PM

Looks great, this is a great page to show to general users as a great css example!
Cheers,
Justin Frost
http://realstock.ca

Posted by Justin Frost on 03/02, 06:07 PM

Nice tip. I have been trying hard to find out dynamic applications of CSS.
Its Really usefull

Posted by Ningsuhen on 03/05, 03:53 AM

Is there anyway to target this to open in a seperate frame that is part of the page?

Posted by Ryan on 03/05, 11:30 PM

hi. this is amazing and i LIKE it !!
but is there anyway to avoid loading the larger image when the page loads ?
i mean the larger image loads when it is hovered.

Posted by Ali Sarshad on 03/06, 07:13 AM

I'm using an ASP.NET datalist so my images come from this:

ImageUrl='<%# eval("Image01") %>'

How do I get the <a href="#thumb" to live happily with ImageURL in my datalist?

Posted by Karen on 03/06, 11:59 AM

I am using the pop up image viewer code (from this site) for flash.swf files. This works very nicely in all browsers (Mac and PC) except Firefox on a PC. (it does work in firefox on a MAC). Can anyone please help?

<td><a class="thumbnail" href="#thumb"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="148" height="22">

<embed src="tips.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="148" height="22"></embed></object><span><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="148" height="22">

<embed src="tips1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="148" height="22"></embed></object>

Posted by Linda Rockhill on 03/06, 09:04 PM

its fine and I am going to use, and one more can u please modify on click action for this,

Posted by manjunath on 03/08, 11:18 PM

ASP.NET answer:

<a class="thumbnail" href="#thumb">

<asp:Image ID="Image2"
CssClass="thumbnail"
runat="server"
EnableViewState="true"
AlternateText="Salvage"
ImageUrl='<%# eval("Image01") %>'
Width="60px"
Height="80px"
BorderStyle="Solid"
BorderWidth="1px"
style="left: 0px; top: 1px"
BorderColor="SaddleBrown" >

<span>

$ <%# eval("Price", "{0:C}") %>
<%#eval("Image02")% >
</span>
</a>

Posted by Karen on 03/08, 11:34 PM

The bottom description under the enlarged image seems to break in IE6. Is there a fix for that?

Posted by Josh on 03/12, 11:45 PM

Comment Pages 16 of 44 pages « First < 14 15 16 17 18 > Last »