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 43 of 53 pages « First < 41 42 43 44 45 > Last »

I have a little issue when activating this:
It works, but it disables another css container directly below it.
I have an ajax tab container directly below (in my code) this image popup code which works just fine until I add the popup code.
<%Product.LongDescription%> (below) is the information that no longer displays in my ajax container once the image popup is activated.
This probably has to do with the placement of my css file...I tried adding a new css file for the pop up information (which is when I saw this issue) and then just added the content to my tabcontent css file. Still no fix.
Any ideas?

<ul id="maintab" class="shadetabs">
<li class="selected">Features</li>
</ul>

<div class="tabcontentstyle">

<div id="tcontent1" class="tabcontent">
<%Product.LongDescription%>

</div>

</div>

Posted by Gavin on 11/06, 01:39 PM

I solved my own problem. By putting the css code in my primary css file it was able to find it and not remove the ajax info. Not quite sure why it did not work on its own css file, but this fixed the problem.

Posted by Gavin on 11/07, 11:47 AM

anyone can help how to add with loading effect when the mouse over

Posted by Joomla panel on 11/07, 02:51 PM

how to design web page?

Posted by netsanet hagos on 11/10, 06:53 AM

I made this script on hqdesire.com

Posted by Tier on 11/11, 02:39 AM

Hello there!

I am new to this. Do you guys know how to add these codes using dreamweaver?
I recently came across this site and would love to learn how to zoom pictures this way:
http://www.lasenza.co.uk/nightwear/grumpy_but_gorgeous/level3.aspx?d=3&type=148&style=698251&product=030006712&img=b808_93

thank you!

Posted by fab on 11/11, 09:20 AM

Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes - examles
Css Link Exanmples 1

Css Link Exanmples 2

Posted by Lessons on 11/12, 09:03 AM

cool effect i am gonna try this out

Posted by computer backgrounds on 11/14, 08:02 PM

Page displays great in IE6 & Firefox, but the mouseovers only appear in firefox...NOT in IE6...

anyone have the css fix for that? is there a hack?

Marc

Posted by Marc Lazar on 11/15, 08:13 AM

This is great! Thank you!

Posted by Borislav Dopudja on 11/16, 04:57 AM

Comment Pages 43 of 53 pages « First < 41 42 43 44 45 > Last »

Commenting is not available in this weblog entry.