Zoom an image on click by scaling it to fit the window
HTML JavaScript 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 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>