1) Script Title: CSS Popup Image Viewer


2) Script URL (on DD):

http://www.dynamicdrive.com/style/cs...-image-viewer/

3) Describe problem:

Apologies for the rough nature of the pages I am linking to here: I just wanted to test everything.

It works FANTASTICALLY for a reasonable-sized page like this:

http://www.united-nations-of-beer.co...eer-gifts.html

But for a bigger page like this:

http://www.cafepress.com/theunob

The enlarged images are at the top where the user can't see them lower down. How do I convert the CSS so the image "follows" the user down the page? (I don't need anything fancy, just for the full enlarged image to be visible no matter how big the page is)

CSS:

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.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*/
visibility: visible;
top: 250;
left: 250px; /*position where enlarged image should offset horizontally */
z-index: 50;
}