Zoom Image On Hover Using jQuery

A tiny jQuery image zoom script that provides a nice magnifying glass effect when hovering over an image.

This is a simple and great solution for websites that have big images and want to allow the user to see details using a magnifier rather than showing the whole image at once. 

How to use it:

1. Add your image to the page as an element and as a background, respectively.

<div class="magnify">
  <div
    class="magnifier"
    style="
      background-image: url(example.jpg);
    "
  ></div>
  <div class="magnified">
    <img
      src="example.jpg"
    />
  </div>
</div>

2. Apply CSS styles to the zoom area.

.magnify {
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  display: inline-block;
}

.magnify .magnified {
  display: block;
  z-index: 10;
  margin: auto;
  width: 600px;
  height: 360px;
  border: 5px solid #fff;
}

3. Style the magnifying glass effect.

.magnify .magnifier {
  height: 200px;
  width: 200px;
  position: absolute;
  z-index: 20;
  border: 4px solid white;
  border-radius: 50%;
  background-size: 1000%;
  background-repeat: no-repeat;
  margin-left: -100px !important;
  margin-top: -100px !important;
  pointer-events: none;
}

4. Style the magnifying glass effect.

.magnify .magnifier {
  height: 200px;
  width: 200px;
  position: absolute;
  z-index: 20;
  border: 4px solid white;
  border-radius: 50%;
  background-size: 1000%;
  background-repeat: no-repeat;
  margin-left: -100px !important;
  margin-top: -100px !important;
  pointer-events: none;
  display: none;
}

5. Load the latest jQuery library at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

6. Enable the magnifying glass effect.

$(".magnified").hover(function(e){

  // Store position & dimension information of image
  var imgPosition = $(".magnify").position(),
      imgHeight = $(".magnified").height(),
      imgWidth = $(".magnified").width();

  // Show mangifier on hover
  $(".magnifier").show();
  
  // While the mouse is moving and over the image move the magnifier and magnified image
  $(this).mousemove(function(e){

    // Store position of mouse as it moves and calculate its position in percent
    var posX = e.pageX - imgPosition.left,
        posY = e.pageY - imgPosition.top,
        percX = (posX / imgWidth) * 100,
        percY = (posY / imgHeight) * 100,
        perc = percX + "% " + percY + "%";
    
    // Change CSS of magnifier, move it to mouse location and change background position based on the percentages stored.
    $(".magnifier").css({
      top:posY,
      left:posX,
      backgroundPosition: perc
    });
  });

}, function(){

  // Hide the magnifier when mouse is no longer hovering over image.
  $(".magnifier").hide();
  
});

---

This awesome jQuery plugin is developed by Ak-ram. For more Advanced Usages, please check the demo page or visit the official website.