Hello, I only know the basics of css, js and html and have been trying to get an mouseover image enlargement going. I've got a really bad and ancient one set up at http://www.floristcompare.com.au/anniversary-flowers/new-south-wales-florists, but it's ridden with problems and probably doesn't even work on half the browsers.

I've looked around for countless threads, w3schools etc to try and get a new solution to it without luck. I found one way but it wasn't really manageable since it would've cluttered up my stylesheet with hundreds of images.

I basically want the image mouseover to work how it does now, but centered on the browser whenever it mouses over.

Thanks, Mike

1 answer


try changing .thumbnail span so that it's position:fixed; top: 50%; left: 50%; (adjust the positioning to suit.

position: fixed is relative to the viewport, position:absolute will be relative to the nearest position:relative parent - which might be the viewport, but with no values for top or left, as you have now it is a bit flaky cross browser.

Mostly these days, people use a lightbox variant - I like this jQuery one: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

which you could fit relatively easily.

Answered about 9 years ago by Tony Crockford
  • Indeed, if i were you id look into the jquery solutions for this. lightbox is only one of the many options Menno Geelen about 9 years ago