Tiny Fast jQuery Image Hover Zoom Plugin - Light Zoom

Light Zoom is a super simple and fast jQuery plugin that makes use of pure CSS to provide a magnifying glass-style hover zoom effect on your images.

How to use it:

1. Include the jQuery Light Zoom plugin's script after jQuery library (Slim build) as follow:

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="lightzoom.js"></script>

2. Invoke the plugin to a specified image in the webpage.

$('.image-selector').lightzoom();

3. Create the magnifying glass effect using CSS:

#glass {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  display: none;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,.6);
}

4. Set the size of the magnifying glass effect.

$('.image-selector').lightzoom({
  glassSize   : 175
});

5. Set the zoom level:

$('.image-selector').lightzoom({
  zoomPower   : 3
});

Change log:

2018-04-12

• JS update

2016-10-07

• JS update

---

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