Dynamic Drive CSS Library- CSS Popup Image Viewer

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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 3 of 53 pages < 1 2 3 4 5 > Last »

Me again, thanks of the post... I updated my style to the following, however it still seems to be loading all the full images in the <span> Anyway around that?



.thumbnail{

position: relative;

z-index: 0;

}



.thumbnail:hover{

background-color: transparent;

z-index: 50;

text-decoration: none;

}



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

position: absolute;

background-color: #000000;

padding: 5px;

left: -1000px;

display:none;

color: #ffffff;

text-decoration: none;

font-weight:bold;

font-size:11px;

}



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

border-width: 0;

padding: 2px;

text-decoration: none;

}



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

display:inline;

text-decoration: none;

top: 0;

 /*position where enlarged image should offset horizontally */



}


Posted by Jessy Hanley on 05/30, 10:05 AM





About: visibility:hidden/visible versus display:none/inline



In Firefox, when you tab to the thumbnail link appears a big focus rectangle. Even if you remove the left: -1000px (which I should guess is a hack for some browser) the focus rectangle covers also the area that is not visible.



This "problem" goes away using display instead of visibility.



Also, if you are only using text in the popup, you should give a "width" to the span.


Posted by Alejandro Lapeyre on 06/01, 09:56 AM





Does anyone know why this wouldn't work in IE when it's embedded in a floating CSS element?


Posted by Greg Sabatine on 06/01, 02:55 PM





Can i used text instead of image to popup it is not shown proper in mozzilla. Can you help me out.


Posted by Prasad Naik on 06/05, 12:42 AM





There are some issues with the position of the enlarged image in Opera vs. IE vs. Firefox.



Also, in Opera, the text underneath the photo is still there when the pointer is removed from hovering.



Anyway, the first issue, check it out easily here http://ia.heavysheep.com/


Posted by Asbjørn on 06/07, 01:04 PM





Interesting, I like very much, but I fear that the page will be heavy, because the browser have to load not only all the thumbnails - obviously - but also all the enlarged  images... 



If someone is already using this script can reassure me,  posting a link to a real fully functional page? 

TIA, Virgix.


Posted by virgix on 06/07, 03:26 PM





I love it.  Thank you very much.  One question.  Where does the size of the popup come from.  Is it the largest unbreakable element?  I want the box to be as wide as a single line of text.  Is there a way to do this without enclosing a table in the pop-up or using  ?


Posted by dustin on 06/09, 12:28 AM





HA. The last thing in that post should be non-breaking space.  It actually interepreted the html.


Posted by dustin on 06/09, 01:24 AM





Nice, I like this a lot. But I found that if you want to protect your graphics and what-not, this dosen't work, which I was hoping it would. The picture toolbar keeps poping up on the images, and you have to disable it:( But it is very usefull and takes up little room.


Posted by Matt on 06/11, 11:59 AM





If I insert text instead of image how i can control the height & width of pop-up. Or in css i have to give height & width.


Posted by Prasad Naik on 06/12, 07:49 AM




Comment Pages 3 of 53 pages  <  1 2 3 4 5 >  Last »







Commenting is not available in this weblog entry.





Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.