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

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 38 of 42 pages « First < 36 37 38 39 40 > Last »

CSS TEXT examples , Properties , Attribute -
http://css-lessons.ucoz.com/css-text-properties.htm

Posted by js examples on 06/23, 12:40 AM

i had the problem of it not working with IE. it took awhile, but i found out my problem was that i needed to include a href="#" in the <a> tag. i didn't want a link, so i didn't include it, but it works now after doing that. may sound stupid, but glad that i was able to corrected it. hope this helps anyone who needs it

the dimensions are different for ie and ff, so i used the little code mentioned on page 35 of the comments here to adjust the ie sizes.

Posted by Andy on 06/23, 02:41 PM

Guillaume, I'm not expert, but I think you don't need to call it a different stylesheet - and that maybe the error the effect does not work - there sould not be conflict, the browser will call the style by its id/name. Just my 2 cents.

Posted by RobinP on 06/27, 12:46 AM

cool..awsome.. i like it.. and also i like your site very mutch

Posted by instinct on 07/01, 12:04 AM

Brilliant thing this See bottom of page for the problem and all Ok on a MAC but on a PC it disappears could there be a problem with positioning in a flexible centre area and having to give it a place that is not too far right ?
Advice greatly appreciated

Posted by Mike on 07/01, 09:00 AM

I LOVE YOU! Thanks so much for posting this. (jumping up and down!)
EXACTLY what was needed for this non-profit feline rescue site and so slick without javascript! I now have to wrestle the CSS to put it where I want, but the effect is GREAT!

It left highlighted code in my Dreamweaver window when I added it to the head of this page, so I put it into the main .css doc, and that worked better for me.

I figured out that the attribute
left: 60px; /*position where enlarged image should offset horizontally */
is where i needed to move the resultant image to the other side by using 512px

now to figure out how to move it UP... Gawd, I hate CSS. :)
AHA, it's here...

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

visibility: visible;

top: -100;

/*top: 0;*/

TRA-LA-LA!!!

Posted by woodsnwind on 07/02, 06:31 PM

CSS Popup Image Viewer

Works beautifully, except cannot get thumbnail image to post. Enlargement works fine. Have tried renaming, etc. Checked code carefully. Any suggestions?

Posted by J.Rogers on 07/05, 06:50 PM

Can i use it on Wordpress? Any ideas?

Posted by bas on 07/14, 01:24 PM

It would be good if it was able to open a new page in place of the larger image.

Posted by Mike on 07/14, 07:56 PM

Is it possible to link the larger image to another web page?

Posted by KW on 07/15, 10:53 PM

Comment Pages 38 of 42 pages « First < 36 37 38 39 40 > Last »