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

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

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!!!

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?

Can i use it on Wordpress? Any ideas?

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

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

I tweeked the code to do exactly what I wanted. I got it to fix itself in the screen so that none of the popup image would be off screen and found out how to position it in the screen. Now when I have multiple thumbnails on sceen, I can see all the popouts without having to scroll up or down. Just took some experimentation. I also set the height of the image so it would not exceed the screen.

I placed notes by each attribute I manipulated in the css:

<style type='text/css'>

/* Popout Image Viewer
----------------------------------------------- */
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: fixed; /* set fixed to keep from moving while scrolling */
background-color: #666699;
padding: 2px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
height: 525px; /* specified to prevent popout from being cut off screen */
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 25px; /* position where popout will display related to top of browser window */
left: 400px; /* pos where enlarged image should offset horizontally */
}
</style>

Thanks for a great example. Use it on my site.

/Per, Giftoverload.com

I have been messing with these photo zoom codes on myspace. A nice little challenge since they do weird stuff with their code...IE the # sign cant be used. I have hit a wall, It will roll over, except its not the image that is rolling over. The rest of the page does a rollover. Anyone have any ideas how to get passed this?