Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
Pin It

jQuery and CSS3 Magnifying Glass for Images

Have you ever want to add a super cool effect to your site of product images and couldn't find a perfect match? I bet these magnifying glass effect should fits in any layout.

These magnifying glass is created using CSS3 box-shadow and border-radius properties. jQuery is used to position it at the cursor coordinates and change the background position accordingly. Moving the cursor away from the image gently fades out the magnifying glass bringing the image back to the default state. The idea of this post is generated from the walkthrough of Thecodeplayer.


    <img class="magniflier" src="image.jpg" width="160"/>

Having the class magniflier is important, as it is what our Javascript code is going to check for, and we have set a value of 160 to scale down the image size before the hovering.


.glass {
  width: 170px;
  height: 170px;
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;
  /* Multiple box shadows to achieve the glass effect */
    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);
    display: none;

The glass effect is simply achieved with basic CSS3 shadows and rounded corners, and we have set the display to none so as to keep the glass invisible until it's hovered-on.

The jQuery

$(function() {

  var native_width = 0;
  var native_height = 0;
  var mouse = {x: 0, y: 0};
  var magnify;
  var cur_img;

  var ui = {
    magniflier: $('.magniflier')

  // Connecting to the magnifying glass
  if (ui.magniflier.length) {
    var div = document.createElement('div');
    div.setAttribute('class', 'glass');
    ui.glass = $(div);


  // All the magnifying will happen on "mousemove"

  var mouseMove = function(e) {
    var $el = $(this);

    // Container offset relative to document
    var magnify_offset = cur_img.offset();

    // Mouse position relative to container
    // pageX/pageY - container's offsetLeft/offetTop
    mouse.x = e.pageX - magnify_offset.left;
    mouse.y = e.pageY - magnify_offset.top;
    // The Magnifying glass should only show up when the mouse is inside
    // It is important to note that attaching mouseout and then hiding
    // the glass wont work cuz mouse will never be out due to the glass
    // being inside the parent and having a higher z-index (positioned above)
    if (
      mouse.x < cur_img.width() &&
      mouse.y < cur_img.height() &&
      mouse.x > 0 &&
      mouse.y > 0
      ) {

    else {


  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 = mouse.x - ui.glass.width() / 2;
    // var glass_top  = mouse.y - ui.glass.height() / 2;
    var glass_left = e.pageX - ui.glass.width() / 2;
    var glass_top  = e.pageY - ui.glass.height() / 2;
    //console.log(glass_left, glass_top, bg_pos)
    // Now, if you hover on the image, you should
    // see the magnifying glass in action
      left: glass_left,
      top: glass_top,
      backgroundPosition: bg_pos


  $('.magniflier').on('mousemove', function() {
    cur_img = $(this);

    var large_img_loaded = cur_img.data('large-img-loaded');
    var src = cur_img.data('large') || cur_img.attr('src');

    // Set large-img-loaded to true
    // cur_img.data('large-img-loaded', true)

    if (src) {
        'background-image': 'url(' + src + ')',
        'background-repeat': 'no-repeat'

    // When the user hovers on the image, the script will first calculate
    // the native dimensions if they don't exist. Only after the native dimensions
    // are available, the script will show the zoomed version.
    //if(!native_width && !native_height) {

      if (!cur_img.data('native_width')) {
        // This will create a new image object with the same image as that in .small
        // We cannot directly get the dimensions from .small because of the
        // width specified to 200px in the html. To get the actual dimensions we have
        // created this image object.
        var image_object = new Image();

        image_object.onload = function() {
          // This code is wrapped in the .load function which is important.
          // width and height of the object would return 0 if accessed before
          // the image gets loaded.
          native_width = image_object.width;
          native_height = image_object.height;

          cur_img.data('native_width', native_width);
          cur_img.data('native_height', native_height);

          //console.log(native_width, native_height);

          mouseMove.apply(this, arguments);

          ui.glass.on('mousemove', mouseMove);

        image_object.src = src;
      } else {

        native_width = cur_img.data('native_width');
        native_height = cur_img.data('native_height');
    //console.log(native_width, native_height);

    mouseMove.apply(this, arguments);

    ui.glass.on('mousemove', mouseMove);

  ui.glass.on('mouseout', function() {
    ui.glass.off('mousemove', mouseMove);



Read through every attribution for better understanding of what operation each line performed.
  • Use the class magniflier to enable the effect on any image.
  • Attach data-large="image.jpg" to the HTML markup if you want to use different image for the zoomed version.
Now you have a simple-to-use magnifying glass plugin for your next project. Feel free to use it and share any improvements that you make with us.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

10 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Great my friend, I did it in five minutes, awesome and I have also another style of zoom with jQuery

  2. Want to watch the Euro Cup live from your home,just check Euro 2016 live streaming and enjoy with your family and friends.

  3. The blog or and best that is extremely useful to keep I can share the ideas
    of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
    strike force heroes| slitherio | earn to die 2
    earn to die 5| goodgame empire |tank trouble 2

  4. We have a few ideas that would make Sims 5 a solid improvement upon its predecessor.

  5. IOS has recently launched new version of Apple Operating System called IOS 10.To upgrade your IOS to Latest IOS 10 new release by Apple Inc. you can get New iOS 10 download free from CydiaNerd on your Browser.

  6. IOS 10 is the tenth major release of the iOS operating system developed by Apple Inc. to use it without any restriction imposed by Apple Inc.You can download iOS 10 Jailbreak. from CydiaNerd.


About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger