Dynamic Drive CSS Library- CSS Popup Image Viewer

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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 (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 39 of 53 pages « First < 37 38 39 40 41 > Last »

if there is a "select" ,it is error!!
please try it:

<a class="thumbnail" href="#thumb">media/dynamicdrive.gif<span>media/zoka.gif
Simply beautiful.</span></a>
<select><option>湖南<//option><option>北京<//option></select>
<a class="thumbnail" href="#thumb">media/ocean_thumb.jpg<span>media/ocean.jpg
So real, it's unreal. Or is it?</span></a>

Posted by xqxujun on 07/27, 08:51 PM

I am having an issue when the images pops up. When a link that is towards the right half of paragraph id hovered over, a portion of the right side of the image is cut off.

The paragraph is on a page that is within an iframe that is within a div tag.

I could change

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

to

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: -400px; /*position where enlarged image should offset horizontally */

But, If any future links are on the left of a paragraph, they will get cut off on the left.

I need help fixing this to make the popup stay inside the iframe.

Posted by Richard Anderson on 07/28, 08:58 AM

NM....

I found a solution....

I made a 2nd style named thumbnailr.

Make one offset 60 and the other -400.. I can just use the style needed depending if the text is left or right

Posted by Richard Anderson on 07/28, 09:06 AM

Hey thanks for the code, just one quick tip I recently discovered using your wonderful code. in the CSS section ".thumbnail span" add the attribute "display:none" because if you try using this in a form there is a weird box that interferes with the tab index of the fields, and adding this eliminates this problem. Thanks again for tha code.

Posted by reptile on 07/28, 09:55 PM

I forgot to mention that in the ".thumbnail:hover span" you also need to add "display:block" for the popups to continue working. :)

Posted by reptile on 07/28, 10:00 PM

I'm having a problem with this, when using large popups, how to keep the popup within the boundaries of the user's browser window. Right now, if hovering over an image to the far right of the screen, the popup will simply load off the screen and force the user to scroll over to see it. Ideally I would like it to recognize when it breaks the boundaries of the window.
The User need to scroll the see the image.
I need to put the image in one prescribed position of the screen so that the user need not to scroll the screen to see the image.
Any solution for these?

Posted by Bhushan Pawar on 07/30, 01:23 AM

Apart from Above issue, I am also facing another issue.
On MOuseOVer when the image Pop's Up, the quality of the image is very poor. Does anyone have any solution for this

Posted by Bhushan Pawar on 07/31, 01:49 AM

Hello, I am trying to create a US Map on my page that people can click on to get to the site for their area. I want the states to "pop-up" slightly as the mouse is moved over them, I understand how html mapping is done, but do not have much experience with CSS. Can someone help me? Thank you.

Jacob Hejny

Posted by Jacob Hejny on 08/04, 03:57 PM

hi! can someone tell me how to change hover into click. i need the pics to enlarge when i click on them. the code is awesome, it works perfectly...but i need the click :)

thank you!

Posted by Ioana on 08/08, 12:37 AM

I am an amateur with CSS and need instructions of where to paste this to. (<head> or <body>) Can somebody help me?

Posted by Darla McKinstry on 08/11, 11:22 AM

Comment Pages 39 of 53 pages « First < 37 38 39 40 41 > Last »

Commenting is not available in this weblog entry.