Simple magnifier / zoom effect by jQuery & CSS3

Did you ever see a magnifier glass in a web page? When your mouse move over a small image, you could see the details in the magnifier glass? And would do you like to make the zoom effect in your own web page? Let’s write some simple lines by jQuery to have the task done.

Click here to see the demo page
Download the Demo pages

First, let’s put the image in the page, and give it a width and height to make it smaller.

HTML

<div class="zoom">
	<img src="blueDoor.jpg" width="400" height="265" />
</div>

We will show the big image in the magnifier glass as background image, and change background image position while user move the mouse. If the mouse move out of the small image, we fade out the magnifier glass, vice versa. There is an illustration to show how we calculation the positions.

(more…)