How to create multiple, separate magnifying effects on hover

There is a great magnifying effect as shown here

$(document).ready(function() {
  var native_width = 0;
  var native_height = 0;
  
  $(".large").css("background", "url('" + $(".small").attr("src") + "') no-repeat");

  $(".magnify").mousemove(function(e) {
    if (!native_width && !native_height) {
      var image_object = new Image();
      image_object.src = $(".small").attr("src");
      native_width = image_object.width;
      native_height = image_object.height;
    } else {
      var magnify_offset = $(this).offset();
      var mx = e.pageX - magnify_offset.left;
      var my = e.pageY - magnify_offset.top;

      if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
        $(".large").fadeIn(100);
      } else {
        $(".large").fadeOut(100);
      }
      if ($(".large").is(":visible")) {

        var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
        var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
        var bgp = rx + "px " + ry + "px";

        var px = mx - $(".large").width() / 2;
        var py = my - $(".large").height() / 2;

        $(".large").css({
          left: px,
          top: py,
          backgroundPosition: bgp
        });
      }
    }
  })
})
* {
  margin: 0;
  padding: 0;
}

.magnify {
  width: 200px;
  margin: 50px auto;
  position: relative;
  cursor: none
}

.large {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 100%;
  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);
  display: none;
}

.small {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="magnify">
  <div class="large"></div>
  <img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200" />
</div>

What I’d like to do is have multiple instances that are separate. I tried making a copy of the HTML and then trying to tweak the CSS/JS but I can’t separate the magnifying effect, it just duplicates the effect for both or doesn’t occur at all.



To fix this you need to reference the .small and .large elements within each .magnify instance, instead of retrieving them all within the DOM at the same time.

To do that you can use $(this).find() within the mousemove event on the .magnify element, like this:

Also note the addition of z-index in the CSS of the .large element to stop the clipping when moving between zoomable elements.