Image Zoom Effect With Vanilla JavaScript

In CSS Tutorial Dec 15, 2017 Image Zoom Effect With Vanilla JavaScript

nMango is a lightweight, blazing fast image zoom library used to overlay your images on the top of the webpage just you seen on You can close the image zoom popup by clicking on the screen or scrolling the web page.

How to use it:

Install the Mango library.

# Yarn $ yarn add mango-js # NPM $ npm install mango-js --save

Import the Mango.

// ES 6 import mango from 'mango-js'; // CommonJS: const mango = require('mango-js');

Add the ‘data-mango’ attribute to the target images.

<figure> <img data-mango src="" alt=""> </figure> <figure> <img data-mango src="2.jpg" alt=""> </figure> <figure> <img data-mango src="3.jpg" alt=""> </figure> ...

Activate the Mango and done.


Don’t forget to import the ‘Mango.css’ into your document.

.mango-overlay { background-color: white; position: fixed; top: 0; left: 0; opacity: 0; height: 100%; width: 100%; transition: opacity 0.3s ease; } .mango-image--open { position: relative; cursor: zoom-out !important; } .mango--open .mango-overlay { cursor: zoom-out; opacity: 1; } .mango-image { cursor: zoom-in; transition: transform 0.3s ease; }

The post Image Zoom Effect With Vanilla JavaScript – Mango appeared first on CSS Script.

Leave a Reply

Your email address will not be published. Required fields are marked *