Dynamic Drive CSS Library- CSS Popup Image Viewer

CSS Library: Image CSS: Here

CSS Popup Image Viewer

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

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 35 of 41 pages « First < 33 34 35 36 37 > Last »

Instead Of an image poping up..., how could i make flash run inside the big window that pops up? So that flash could be executed inside and a flash video would load when the large windows pops up...

Posted by Adriano CorteReal on 05/08, 05:27 PM

This scripts are good for test:

<html><head>

<link rel="stylesheet" type="text/css" href="css/popup_image.css" >



<a class="thumbnail" href="#thumb">

jpg/tree_thumb.jpg

<span>jpg/tree.jpg

Simply beautiful.</span></a>



<a class="thumbnail" href="#thumb">

jpg/ocean_thumb.jpg<span>jpg/ocean.jpg

So real, it's unreal. Or is it?</span></a>













<a class="thumbnail" href="#thumb">Dynamic Drive<span>gif/dynamicdrive.gif

Dynamic Drive</span></a>



<a class="thumbnail" href="#thumb">Zoka Coffee<span>gif/zoka.gif

Zoka Coffee</span></a>

<html>

This work directly if u copy .css file in 1 css folder, and up picture. If u know little web language is simple.

Posted by DOOMNEZEU on 05/09, 10:30 AM

This site is awesome and the code almost works! First and foremost, thank you so much. Great site. Finally, a place to get clear code without being afraid. (smile) Anyway, is there a way to duplicate this code for images that must go into cells along with shopping cart codes? Please see link to site. Could you give me some pointers as to how to tailor it to do so? I tried by duplicating code and inserting beneath original code, changed image name, text. But, to no avail. Thanks so much, again!

Posted by LA Fiore on 05/09, 12:29 PM

Great effect. Could this be used with an "onClick" instead of "mouseOver"? I'm trying to design a restaurant website and I need to link a button to a menu just below the button (on the same page). Again, nice work.

Posted by RKyle on 05/12, 10:30 AM

How do you get it to work when the large images (the popups) are not the same size? My problem is that the thumbnails keep "dancing around" when I hover over them because the large images are not the same size (I cannot make them the same size because some have to be tall and skinny and others wide and fat).
Thanks!

Posted by Sita Hessenbruch on 05/17, 06:02 PM

I found the answers for a few questions I had and a some others have asked ...

To get the popped up image to be a clickable link in and of itself, you can add onclick="location='somepage.html'" to its img tag like this ...
... <span>poppedthumb.jpg</span> ...
I got the information from this page : http://www.carlaereyes.com/portfolio/index.php?tag=portfolio:menu=fine32art

My next problem was to get consist layout between IE and Firefox ... the offset of the popped up image was all over the show and I wanted it centered above my thumbnail. This is my own 'fix' and I'm just a beginner so I can't guarantee it's not bad somehow, but so far it works :D on my page anyway ... it may be something wrong with the CSS layout that's breaking how the image pops ...

My popped image layout fix for Firefox vs IE
Define the layout for the popped up thumnail in your

.thumbspop:hover span{

left:100px;

top:100px;

}

or whatever you like. Then, after that </style> add this

<!--[if IE]>

<style>.thumbspop:hover span{ top:75px; left:75px; }</style>

<![endif]-->

and adjust top and left so it's perfect in IE ;) Done!

Posted by Ke5in on 05/18, 09:44 PM

Oops messed up!

add the onclick="Location... like this

... <span>thumb.jpg</span></a>

Posted by Ke5in on 05/18, 09:49 PM

What the ... it's not me messing up it's this place :D

Ok in the IMG tag, add onclick="location:'somepage.html'" in between the the <img and the src="" parts ... like you would a normal onclick command ...

... let's see if it gets canned this time LOLstr

Posted by Ke5in on 05/18, 09:51 PM

I would like to know if it is possible to change the position of the enlarged image relative to the image when scrolling down the page. I have a large list of image's: 1500px in height.

When one hovers over the bottom images for example the enlarged image opens at the top of the page and the viewer will not be able to see it.

Posted by Lelanie Melville on 05/19, 02:14 AM

Hi,

nice effect!!
Can you tell me how to get two or more photos to change by themselves?

Help me!!
thanks
Mavi

Posted by Mavi on 05/23, 12:41 PM

Comment Pages 35 of 41 pages « First < 33 34 35 36 37 > Last »