Image Zoom JS

Description coming soon.

 

Demo

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

 

Features

• Lightweight
• No dependencies
• Performant
  • Animates only transform and opacity
  • Utilizes CSS transitions
• Customizable
  • Very minimal CSS
  • Easy to change backdrop color, animation speed, 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-zoom.css.

<link href="css/image-zoom.css" rel="stylesheet">

2. Include image-zoom.js.

<script src="js/image-zoom.js"></script>

3. Add the data-zoom-image attribute to an <img>.

<img src="img/fruit.jpg" data-zoom-image>