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

Color Inspiration Tool

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

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 14 of 46 pages « First < 12 13 14 15 16 > Last »

sorry it works now in asingle file

Posted by trunks on 01/30, 03:05 AM

I am using the following code and it works great in safari, ie and firefox but in ie I can not get the thunbnail hover to be linked so i have to go down to the thumbnail text to click, can anyone help... i am almost done with this great css file.

<HEAD>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#galleryimage {
position: relative;
z-index:0;

}

.thumbnail {
display:block;
font-family: Arial, Helvetica, sans-serif;
font-size: 13.5px;
color: #333333;
text-decoration: none;

}

.thumbnail:hover{
position:relative;

}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background: #ff8b34;
padding:5px;
left: -1000px;
border: 1px dashed #666666;
display:none;
color: #666666;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 8.5pt;
font-style: normal;
font-weight: normal;

}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding:2px;

}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
display:block;
top:20px;
z-index: 50;
left: 10px;

}

</style>
</HEAD>

Posted by pgt on 01/30, 12:52 PM

please check link

Posted by pgt on 01/30, 12:53 PM

Also the text under the image goes crazy in ie and does not allow for regular paragraph lines.

Posted by pgt on 01/30, 01:21 PM

Took me forever how to figure this script out but I did it. My original image was 428x328. I added the html code in for the width & height after the img src and VOILA I got it!!

Posted by Debbie on 02/05, 03:56 PM

I tried to use this popup on a map with area shapes.
I have problem to code the mapping to show a different popup message over each map area.
I coded only one area for the time beeng, I will code the other area when this one will be working.

The problem is that the popup shoes when I go over the entire image instead of the map area.

Here is my html code :



<a class="thumbnail">images/carte_terrains.gif

<map name="terrain" id="terrain">

<area  shape ="poly" coords="199,89,226,103,249,70,215,64" href="#" alt="terrain_55" ></map>

<span>Superficie 25000 pi2</span></a>

Thanks for helping me.

Posted by Clement Cournoyer on 02/05, 04:17 PM

Hey, im having some trouble. hopefully someone can shed some light if possible?

When rolling over the thumbnail the larger images shows as planned, however, it is behind everything else on the page.

If i'm correct in saying, this is to do with the z-index? but i dont know anything about z-index's, how they work etc..

do you have to give everything that the larger thumbnail appears behind, a smaller z-index than the larger image has.

Posted by Marky Mark on 02/06, 12:48 PM

Best css stile
you link to a CSS in the HEAD of the page
<style type=text/css>@import url( zoka.css );</STYLE>

Posted by Boki on 02/10, 05:34 PM

I wrote some script similar to this. Had so so luck. Found your script, tried it. It works better, but not perfect in Opera. I was going to use it for a glossary where you hover the word and get the definition, but it's spotty at best. Any way i can get around this?

if you want to check it in opera heres an example
http://www.karting101.com/glossary.htm

Posted by Chris on 02/13, 10:57 PM

Great script. Is it also possible to make a link to a new page from the thumb and/or the larger image?

I try it at: SEO Guru Pakistan @ www.junaid.biz

It work fine...thanks

Posted by SEO Guru Pakistan on 02/15, 03:12 AM

Comment Pages 14 of 46 pages « First < 12 13 14 15 16 > Last »