Dynamic Drive CSS Library- CSS Popup Image Viewer

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

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

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 5 of 41 pages « First < 3 4 5 6 7 > Last »

Doesn't work in a table in Opera 9.

Posted by mel on 06/29, 10:32 AM

guys, lovely script here. i have put this into my page:
http://www.chantik.in/theodyssey/gallery.html

there is a problem when viewing it with firefox. in the page listed above, there are 2 parts where i have incorporated this css script. at the top of the page, the script works fine, but at the bottom of the page (where it says please move your mouse over the image for the full size)the light yellow colored thing doesnt go all the way. and how come they don't pop up in line with each other?

any help is greatly appreciated. thanks.

regards,
akshay

Posted by Akshay on 06/29, 07:07 PM

Is there any way, <1> we can assign the image on webpage. <2>can we change the size of image.

Posted by Mohammad Sabeeh on 07/03, 11:02 PM

It's exactlly what I was looking for. Simple, quick and customizable. Excelent!
Thank you very much for your great job! :-)))

Posted by Jaume on 07/04, 11:39 AM

I wonder if anyone can see a way to introduce a randomizing element to this? What I mean is: I plan to have 5 different coloured buttons that throw up a different quote and image (that can be saved out as a desktop background) when you mouse over them. So the mouseover in my case would be on the button itself. And to get the random aspect here, the large image that pops up when a button is selected (moused over) would be different from one moment to the next. I guess you're talking at the very least about adding some javascript here(?) Any thoughts from anyone would be greatly appreciated. Gary

Posted by Gary Anson on 07/05, 09:47 PM

It's easy, clean and exactly what I was looking for, but I have problems making it run in a table (in Opera 9, at least). Any hints on this? Thanks a lot.

Posted by Yamada Saro on 07/10, 12:23 AM

Very nice and simple code:) I'm impressed, but I've a problem when trying to run it in Opera 9? Any suggestions? Thanks in advance!

Posted by Rob on 07/12, 06:18 AM

Really cool stuff, but the pop-up image is not clickable in IE. Any idea how to fix this?
ta. Nestor

Posted by nestor on 07/13, 04:19 AM

I think I figured out the Opera bug in tables... you can either 1 take off the z-index for the hover element, but that could be bad depending on your situation... or you could add display:block to each element so it is always display block... which should correct the problem... please post back or email me if otherwise... thanks... by the way... great script....

Posted by Matthew Kuhn on 07/15, 02:59 PM

HOW COME THIS CODE DOESNT WORK IN MYSPACE... I KNOW MYSPACE FILTERED JAVASCRIPT BUT THIS IS NOT A JAVASCRIPT...CAN SOMEONE TOLD ME HOW TO WORK THIS IN MYSPACE THANK YOU...

Posted by BEN on 07/15, 10:58 PM

Comment Pages 5 of 41 pages « First < 3 4 5 6 7 > Last »