Positioning magnified images vertically on page

[sucr]

I am using css to create an image enlargement effect similar to istockphoto.

There is a column of 20 product thumbnails flowing down a page and when the pointer hovers on one thumbnail, css brings the enlarged image into view. Initially the enlarged images are off the left of the page (-1000px).

Is there any way with css to always make the enlarged images appear exactly centered horizontally and vertically on the visible portion of the page?

[JamesOxford]

not really sure if this will work or not; but I have seen what you are asking about done. It is possible. It might require a JS solution. You could try setting a percentage based top and bottom margin and see what happens. No idea if that would work though.

[sucr]

Thanks for your reply.

A value of 50% works okay for horizontal, except that it determines the position for the left side of the image and therefore is not exactly center and varies with the width of each image.

The vertical position is more of a problem because it seems to be related to the total page length rather than the visible portion of the page.

Maybe I will have to look for a js option.

[hdewantara]

Making it "position:fixed;" didn't help either?

[sucr]

No, "position:fixed" did not help in centering the image vertically.