Magnify an image on hover by turning the cursor into a loupe
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
src
LICENSE
README.md
index.html

README.md

Image Loupe JS

Description coming soon.

 

Demo

https://alecrios.github.io/image-loupe-js/

 

Features

  • Lightweight
  • No dependencies
  • Performant
    • Animates only transform and opacity
    • Utilizes the requestAnimationFrame API
  • Customizable
    • Very minimal CSS
    • Easy to change loupe size, border, shadow, etc

 

Development

This project is still under development and not production-ready. It is written in ES2015, so it needs to be compiled with something like Babel for better browser support.

 

Usage

  1. Include image-loupe.css.
<link href="css/image-loupe.css" rel="stylesheet">
  1. Include image-loupe.js.
<script src="js/image-loupe.js"></script>
  1. Add the data-loupe-image attribute to an <img>.
<img src="img/fruit.jpg" data-loupe-image>