Minimalist Image Pan & Zoom On Hover - jQuery NZoom

An ultra-light (less than 1kb) jQuery inner zoom plugin for magnifying and panning an image within its original container.

Created using JavaScript (jQuery), CSS3 transitions/transforms, and mouse move/enter events.

How to use it:

1. Load the JavaScript file Nzoom.min.js after jQuery.

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

2. Assign the ID 'NZoomImg' to the target image and then wrap it into a container as follows:

<div class="zoomArea">
  <img id="NZoomImg" src="product.jpg" alt="Product Image">
</div>

.zoomArea {
  width: 600px;
  height: 450px;
  overflow: hidden;
  border:1px solid
}

.zoomArea > image {
  width: 100%;
  height: 100%;
}

3. Determine the zoom factor by which to scale the image on hover.

<div class="zoomArea">
  <img id="NZoomImg" data-NZoomscale="2" src="product.jpg" alt="Product Image">
</div>

---

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