Product Image Zoom On Hover - jQuery Zoom.js

A tiny image magnifier jQuery plugin that adds a zoom effect to any images like product images on eCommerical websites and featured images in blogs.

Features:

• Show a bigger size image on mouseover.
• Custom magnifier glass effect.
• Customizable zoom level.

See Also:

• 10 Best Image Zoom jQuery & Vanilla JavaScript Plugins

How to use it:

1. Add the large version of the image to the page as follows:

<div class="zoom">
  <!-- Small Image -->
  <div class="original">
    <img src="thumb.jpg" id="target">
  </div>
  <!-- Large Image -->
  <div class="viewer">
    <img src="full.jpg">
  </div>
  <!-- Magnifier Effect -->
  <div class="magnifier"></div>
</div>  

2. The required CSS styles for the zoom effect.

.zoom, .original {
  position: relative;
}

.zoom {
  display: inline-block;
}

.original {
  cursor: crosshair;
}

#target {
  width: calc(var(--t) / 2);
}

.zoom .viewer {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.zoom .viewer img {
  position: absolute;
}

.original:hover ~ div {
  display: block;
}

.original::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

3. Customize the magnifier effect.

.magnifier {
  position: absolute;
  background: #000;
  opacity: 0.7;
  top: 0;
  left: 0;
}

.magnifier, .viewer {
  display: none;
}

4. Load the zoom.js library after jQuery.

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

5. Initialize the plugin and specify the zoom level (default: 2).

var myZoom = $('#target').zoom(5);

6. Set the zoom level programmatically.

myZoom.setZoom(level);

---

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