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

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

Nice script. Simpler than the other tooltips on this site I think.

Posted by Mariano on 07/17, 03:32 PM

Just Excellent professional contribution,...

Posted by Sarmad al Saadi on 07/19, 12:50 AM

if image is large, then it will destroy the page

Posted by dfg on 07/24, 11:46 AM

Very Cool I have learn a lot Open Arms like you is very good for those who are learner.

Posted by Rajneesh on 07/28, 12:43 AM

Very nice code ! But I think the best way for gallery :
- directory scan with php code as : thumbnails, photos
- dinamic tn large ..
- optional comment ..
- current css and html code using these addons

Sorry my very bad english ..

Posted by Sevoir on 07/28, 02:54 PM

Here is php beta code with :
- directory scan : photos
- optional large of thumbnail's ..
- thumbnails / line ..

http://www.sevoir.hu/gallery.php

Posted by Sevoir on 07/31, 02:46 PM

zip : http://www.sevoir.hu/gallery.zip

Posted by Sevoir on 07/31, 02:57 PM

Cool.. Thanks a lot to CSS Drive.

Posted by DDM on 08/01, 02:06 PM

This is a great site and an excellent script. Can this be used on Myspace?

Posted by Nathan on 08/05, 08:11 PM

Never mind, I figured out my problem on myspace. However when you hover on the thumbnail, it will resize but if there is a pic below it, you can see it through the larger one. What would it take to correct this? once again very nice site and script..thank you very much. : )

Posted by Nathan on 08/06, 06:13 AM

Comment Pages 6 of 44 pages « First < 4 5 6 7 8 > Last »