Image Zoom Magnifying Glass Effect with CSS3 and jQuery

Ever wanted to add a magnifying glass effect to your product images for an awesome zoom-in and a great user experience ? You’ll be surprised to know that using CSS3 and jQuery, it’s really easy to integrate this effect to your website or webapp.

What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.

Demo First

Let’s Start

Well, the entire idea is based on this Walkthrough from TCP. I just had the time to convert the code from the walkthrough into a dead simple plugin and that’s what I would like to talk about. Although the walkthrough does an excellent job at explaining how things work, I would still like to quickly skim over the basic concept in the plugin’s context, that I developed.

The Logic

The basic idea is to have a large image, say 800×400 that we scale down to say 400×200 using the width html attribute or the CSS property. Having the class magniflier is important, as it is what our Javascript code is going to check for. The simple markup:

<img class="magniflier" src="http://mysite.com/myimage.png" width="400" />

Then on mousehover we bring on a magnifying glass over the image. The glass effect is simply achieved with basic CSS3 shadows and rounded corners:

.glass {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;

  /* Multiple box shadows to achieve the glass effect */
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);

  /* hide the glass by default */
  display: none;
}

The glass is initially created using jQuery which is basically just a div.glass element. It remains hidden until the mouse is hovered over the image, which is when it appears using the jQuery fadeIn method. It is interesting to note that if we use 10 images, then we’ll only have 1 glass element instead of 10s. This is how we create the element dynamically:

// Add the magnifying glass
if ($('.magniflier').length) {
  var div = document.createElement('div');
  div.setAttribute('class', 'glass');
  var glass = $(div); // For later reference/usage

  $('body').append(div);
}

Remember, when the mouse is hovered over an image, the glass’s background-image is set to the original image that has larger dimensions compared to our scaled down version or you can also specify a different image in the data-large attribute if you would like to:

<img class="magniflier" src="http://mysite.com/myimage.png" data-large="http://mysite.com/mylargeimage.png" />

It is important to calculate the dimensions of the large version of the image used for the zoomed-in preview. I have explained how to do it in one of my earlier posts. The calculated width and height are stored in native_width and native_height respectively.

When you have the exact size of the larger version, all you need to do is use a simple little formula to calculate the proper background-position offsets for the magnifying glass based on the mouse positions.

  var magnify = function(e) {

    // The background position of div.glass will be
    // changed according to the position
    // of the mouse over the img.magniflier
    //
    // So we will get the ratio of the pixel
    // under the mouse with respect
    // to the image and use that to position the
    // large image inside the magnifying glass

    var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
    var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
    var bg_pos = rx + "px " + ry + "px";

    // Calculate pos for magnifying glass
    //
    // Easy Logic: Deduct half of width/height
    // from mouse pos.

    var glass_left = e.pageX - ui.glass.width() / 2;
    var glass_top  = e.pageY - ui.glass.height() / 2;

    // Now, if you hover on the image, you should
    // see the magnifying glass in action
    ui.glass.css({
      left: glass_left,
      top: glass_top,
      backgroundPosition: bg_pos
    });

    return;
  };

The formula to calculate the position of the magnifying glass based on the mouse position (relative to the document) was easy. All we had to do is deduct half of the width and height of the glass from the mouse positions and use those values as the left and top offsets of the glass.

But the key part of this entire thing, is the formula to calculate the background’s position for the glass that places the large preview of the image properly, leading to the magnification. Let’s break that down:

// Breakdown of:
// var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
// var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
// var bg_pos = rx + "px " + ry + "px";

// The background position of div.glass will be changed
// according to the position of the mouse over img.magniflier

// So, first lets get the ratio of the pixel
// under the mouse pointer with respect to the image
var rx = mouse.x/$("img.magniflier").width();

// Corresponding pixel on the large image
var large_x = rx * native_width;
// Centering the background inside the glass
large_x = large_x - $('div.glass').width() / 2;

// Finally, since we're specifying px offsets we'll
// have to negate the x/y offset
large_x = large_x * -1;

// Repeat the same for `large_y`

// `large_x` will be the `left` offset
// `large_y` will be the `top` offset

Read the comments in the above code for proper understanding of the logic behind the formula.

Boom! That’s all for our simple little feature. No one is stopping you from digging through the code in the Demo ;-).

Usage

  1. Put the Javascript and CSS code in different files and load them using script and link tags.
  2. Use the class magniflier to enable the effect on any image you want to.
  3. Use the data-large attribute if you would like to use a different image for the zoomed version. So basically, the jquery code checks for img.attr('data-large') with a fallback to img.attr('src').

and… we’re done! \o/

Final Words

It was a quick work from me and I am sure the code can be improved massively. Feel free to use it and share any improvements that you make.

Now you have an uber simple-to-use magnifying glass plugin for your next project!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.

6 thoughts on “Image Zoom Magnifying Glass Effect with CSS3 and jQuery”

  1. Sir, If we make a magnifier extension for Chrome, then what should be the code to magnify any image we like or see on the webpages. Please reply.
    Thank you.

  2. The best Image Zoom! Thank you very much. Clean Code, good comments and excellent design. I’m using at my site.

  3. Hi I can get the css and the html to work, as in the images are where they should be however I can’t seem to get the mouse over and enlarge js to work. Is there any advice you can give on what I may be doing wrong? Thank you

  4. Hi, this is really great article, i have implemented & this works fine for desktops but for ipad it has issue of touch event. Is there any solution?

Leave a Reply

Your email address will not be published. Required fields are marked *