Magnifier Image Zoom With Hover And MouseWheel Events

Preview:

Description:

A vanilla JavaScript image zoomer to create a circular magnifier effect on the image that users are able to zoom in/out a part of the image with mouse hover and mouse wheel events.

How to use it:

Load the main JavaScript at the end of the HTML document.

<script src="imageZoom.js"></script>

Add the data-zoom="enabled" attribute to the target image and done.

<div class="image-zoom">
  <img src="image.jpg" data-zoom="enabled">
</div>

Customize the appearance of the lens.

<div class="image-zoom">
  <img src="image.jpg" 
       data-zoom="enabled"
       lens-width="VALUE"
       border-radius="VALUE"
       border-color="VALUE"
       border-width="VALUE">
</div>