image-zoom-js icon indicating copy to clipboard operation
image-zoom-js copied to clipboard

Published 20 hours ago • verified publisher icon alecrios
→

Metadata

Zoom an image on click by scaling it to fit the window

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">
  1. Include image-zoom.js.
<script src="js/image-zoom.js"></script>
  1. Add the data-zoom-image attribute to an <img>.
<img src="img/fruit.jpg" data-zoom-image>

← Metadata

17
Stars
0
Forks
Watchers

Owner

verified publisher icon alecrios

Metadata

Zoom an image on click by scaling it to fit the window

Back