Magnify Image On Hover – Loupe.js

Category: Image , Javascript , Zoom | September 30, 2022
Views Total:363 views
Official Page:Go to website
Last Update:September 30, 2022


Magnify Image On Hover – Loupe.js


This is the Vanilla JavaScript version of the jQuery Loupe plugin, which makes it easier to apply a magnifier glass effect to your image.

With this image zoom library, users can see details of your product image with mouse movement.


  • Adjusts the zoom level with mousehweel.
  • Allows you to set minimum and maximum zoom levels.

How to use it:

1. Load the Loupe.js library’s files in the document.

<link rel="stylesheet" href="loupe.css" />
<script src="loupe.js"></script>

2. Add the original version and thumbnail of an image to a web page.

<a id="demo" href="original.jpg">
  <img src="thumb.jpg" />

3. Initialize the Loupe.js.

new Loupe(document.getElementById('demo'),{
    // options here

4. Set the initial zoom level. default: 2.

new Loupe(document.getElementById('demo'),{
    zoom: 5

5. Set the minimum and maximum zoom levels. default: [1.2, 7].

new Loupe(document.getElementById('demo'),{
    range: [1.5, 5],

You Might Be Interested In:

Leave a Reply