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

Wow those are some really beautiful pictures!Thanks,i will do this for sure!:)Keep on doing what you do,i like this kind of stuff!

Posted by valerie on 06/01, 07:28 AM

Can I use this script in php ???
end if yes how ????
Thanks

Posted by consigliamoci on 06/08, 03:20 AM

This is a great script. Easy to implement. Tweaked it a little for my purposes. I needed a more horizontal popup that was text heavy, so I built a horizontal "spacer" image. When the site goes live, it will be here: http://www.serenityvillages.com

Thanks again.

Posted by Jorge Goyco on 06/11, 02:42 PM

It works well on internet explorer 7.0 and mozilla firefox. Great script.

Posted by Someone on 06/11, 06:19 PM

There are little difference between IE and Mozzilla: the popup image isn't in the same position!

Any suggestion? Thanks.

Posted by Mac on 06/12, 04:06 AM

Great tool, great css, great effect! I went thru each and every of these 19 pages of extra extra stuff to make sure I added all the lil scripts I needed so the thumbs would appear exactly as intended... and it sure worked. On IE, Opera, Firefox and Netscape on PC. Perfectly, posyioning and everything.
Hey guys, keep up the good work.

Posted by SenghorChild on 06/12, 02:27 PM

I'm using your script with a rollover combined with fireworks sliced images.

Works fine in i.e.

In Safari the image is cropped. In Firefox, the larger image is displayed from the bottom of the thumbnail, rather than the top.

Any ideas for a FireFox / Safari fix?

Posted by Lee Wayland on 06/19, 07:44 AM

Lee... I suppose that you are not hiding correctly your large image, check that the ID stuff is correct. For me it works great in ie6, ie7 and FF2. In opera if I click on the image, nothing happens, but who use Opera anyway? :P

Posted by MuTaY on 06/19, 08:09 PM

Can anyone provide instructions on how to do this or direct me to a company who can put this on my site?

Mike

Posted by mike tabb on 06/20, 09:45 PM

I can do it for you if you like... really cheap :)
If you are interested contact me mutay@ciudad.com.ar

Posted by MuTaY on 06/20, 09:50 PM

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

Commenting is not available in this weblog entry.