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

It shows different top positioning in IE6 and Mozilla.
By replacing this class, we can solve this problem:

.thumbnail:hover span{
visibility: visible;
top:0px !important;
top:60px;
left: 60px; /*position where enlarged image should offset horizontally */
}

Posted by Amit on 06/21, 01:28 AM

I can see how people can use that for SEO purpose.
For example, I can have a nice and clean homepage.
Then I will stuff a lot of keywords/phrases inside those popups.

Now, I have a visually clean page that contains a lot of keywords.

Posted by Tim on 06/22, 11:53 AM

hey nicely shown!
but just wanted to point out.. for people who are not very familiar with CSS ...
it would be better if u point out the include line (<link>) that has to be written in teh head of the html page. :-)

Posted by Ankur on 06/22, 03:11 PM

i wanna use this aplication with some link or some special keywords.and i dont want to images just information.can you help me about this?adnantanik@gmail.com

Posted by ADNAN TANIK on 06/22, 06:27 PM

ok, but if their is a loading effect it will more great.

Posted by Avijit Brahma on 06/25, 08:07 AM

Although the effect is cool, it does not work well in Safari and Opera, careful. =)

Posted by Tedel on 06/25, 03:16 PM

Niceeee, I like it

Posted by Baren on 06/27, 04:56 AM

I page works okay in IE but is not coming up in Firefox. Atleast the thumbtail does not enlarge on mouseOver. Any help?

Posted by Rome on 06/28, 12:13 PM

never mind. I found the fix...

Posted by rome on 06/28, 12:23 PM

In my case, the image size is fix in (width=178px) and i fix the problem with IE 6 for text more large by include only 4 lines more in css:

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed orange;
visibility: hidden;
color: black;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration: none;
text-align: justify;
width:170px;
}

Posted by Janfry on 06/29, 09:49 AM

Comment Pages 20 of 53 pages « First < 18 19 20 21 22 > Last »
Commenting is not available in this weblog entry.