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 47 of 53 pages « First < 45 46 47 48 49 > Last »

Help!!

This is great script and does just what I want, but it seems to enlarge the size of my page vertically and I end up with a huge empty space at the bottom of my pages with these mouseover links on.

I have tried replacing visibility:hidden with display:none and I get no images appearing on mouseover. Replacing it with display:inline just creates the same problem.

Posted by John on 01/22, 05:01 AM

Though I ought to include the code I'm using incase there is something wrong with it. Here is an example:-

<a class="thumbnail" href="#thumb">Kenneth Evans<span>../Images/Kenneth Guy Evans.bmp
Kenneth Guy
Evans</span></a>

The href="#thumb" turns the text into a link but I'm not sure what the #thumb is exactly.

Posted by John on 01/22, 10:52 AM

Had a bit of time to explore this and it seems to be problem with the text links. I have my text in a box with a scrollbar. If I leave the css as

.thumbnail{
position: relative;
z-index: 0;}

Then the linked text stays fixed on the page as I scroll the text and the links appear in the blank part of the page. If I change it to position:static then the links scroll with the text but I am still left with the blank bit of page.

Any suggestions?

Posted by John on 01/23, 11:28 AM

I would like to make the images pop up above smaller image rather than down. Have been playing with the css for hours but I can't make it work. Does anyone have any ideas?
Thanks
Jen

Posted by Jen on 01/24, 06:51 AM

I had implemented the code for visitor accept the terms and enter popup boxes that will take visitors directly to the pages with feature or new items, and it is working great, however it works in every browser tested but fails to redirect under Firefox, had to warn visitors under the form to use the static accept terms and enter button on page, if someone has any ideas as on how to correct the issue, they will be greatly appreciated. Please check the site and bear in mind that it contents adult themes, hence the "I accept" checkbox.
Thanks

Posted by Abigail on 01/24, 07:53 AM

here is a bug in this css code
when i hover that pic it not show full span
i have solve this bug by utting z-index in span and img



.thumbnail span img{ /*CSS for enlarged image*/

z-index:100; /* Z Index for makeing image in top */

border-width: 0;



padding: 2px;

}



.thumbnail:hover span{ /*CSS for enlarged image on hover*/

z-index:100; /* Z Index for makeing image in top */

visibility: visible;

top: 0;

left: 60px; /*position where enlarged image should offset horizontally */



}

Posted by Ayush on 01/24, 08:29 AM

I am not sure where to actually place the code. I tried putting the first part in the "head" section, and the 2nd part on the page where I want to display the image, but all I got was a text link, no image.
This is my first attempt at CSS, so some simple instructions would be great.
Thanks,
Michael

Posted by Michael on 01/25, 05:20 AM

I updated placing a browser detect and redirection for Firefox users only, but I like this to be temporally since it is bad for Search engines.

Posted by Abigail on 01/25, 11:41 AM

How to use this for a COMODO trustedlogo like use?

So how to set the image to BOTTOM RIGHT, with a POPUP IMAGE that hovers to the left of the bottom right.

Would like to see if this is possible with CSS

Posted by tony on 01/26, 02:28 PM

Another one of your great codes. Thanks

Posted by Indian on 01/26, 02:50 PM

Comment Pages 47 of 53 pages « First < 45 46 47 48 49 > Last »

Commenting is not available in this weblog entry.