Simple Image Inner Zoom On Hover Using jQuery

A simplest jQuery solution to zoom in /magnify / enlarge images on mouseover & mousemove.

How to use it:

1. Add the CSS class 'zoom' to your image.

<img class="zoom" src="1.jpg" alt="img">

2. Wrap the image into a container with CSS class 'zoomIn'.

<div class="zoomIn">
  <img class="zoom" src="1.jpg" alt="img">
</div>

3. The required CSS for the 'zoomIn' container.

.zoomIn {
  overflow: hidden;
  position: relative;
  z-index: 100;
  cursor: crosshair;
}

4. Include the needed jQuery library at the bottom of the webpage.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

5. The JavaScript to enable the inner zoom effect.

$(document).ready(function () {
  var $container = $('.zoomIn');
  var $image = $container.find('.zoom');
  var $imageW = $image.width();
  var $imageH = $image.height();
  var $containerW = $container.innerWidth($imageW);
  var $containerH = $container.innerHeight($imageH);
  var $imageClone = $image.clone();
  var $imageLarge = $imageClone.width($imageW * 2);
  var imageLargeW = $imageLarge.width();
  var imageLargeH = $imageLarge.height();
  $image.width($imageW).height($imageH);
  $('.zoomIn').on({
    mouseenter: function () {
      $imageLarge.hide().prependTo($container).fadeIn(300);
    },
    mousemove: function (e) {
      var mouseX = e.pageX - $(this).offset().left;
      var mouseY = e.pageY - $(this).offset().top;
      var amountMovedX = Math.round(mouseX / $imageW * 100) / 100 * (imageLargeW - $imageW);
      var amountMovedY = Math.round(mouseY / $imageH * 100) / 100 * (imageLargeH - $imageH);
      $imageLarge.css({
        'top': amountMovedY + 'px',
        'left': -amountMovedX + 'px',
        'position': 'relative'
      });
    },
    mouseleave: function () {
      $imageLarge.remove();
    }
});
});

---

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