How to simulate magnifying glass on Web-page image (Javascript)?

Question

Google has the coolest effects - once it was a Pac-man game, today is apparently the 160th anniversary of the first World Fair, and Google\'s logo has an image of i

Answer 1

Well, firstly, for anyone who wants to use such an effect, there are loads of jQuery plugins. Here are just a few:

1. Power Zoomer
2. Featured Image Zoomer
3. Cloud Zoom

Secondly, it's quite easy to achieve. Just load the full-size image, but give it a width smaller than it's actual width, so it is scaled by CSS. Then, use JavaScript+CSS to create a Div (the magnifying glass) with the same image as background, but change the background-position property to the corresponding scaled x,y coordinate that the user's mouse is currently on.

There are other ways of doing it I suppose, and Google might be doing it differently, but this is the most obvious way for me that comes to mind.