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.


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

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.


Make equal height columns by jQuery

We use equal height column layout in web page a lot. If we have to use pure CSS, probably we would give the column container a repeat-y background image( like the image below) to make the columns look with equal height.

In this case, the columns do not really have equal height, but look in that way with the background image. If you want change the column’s background, border, spacing, etc., you will have to edit the background picture. It’s sort of annoying, especially for UI. However, with a little help from jQuery, we can get equal columns easily.

Two columns layout