HoverZoom is a plugin built on javascript which allows users to zoom
in images as they hover. This plugin doesn't depend on any other
libraries and this doesn't use JQuery. This would cut a significant
download time as this is built 100% using plain vanilla javascript.
Getting Started
Include stylesheet in head tag:
<head>
...
<link rel="stylesheet" href="hoverzoom.min.css">
...
</head>
and script in body tag:
<head>
...
<script src="hoverzoom.umd.min.js"></script>
...
</head>
Add "hoverzoom" classnames to your image:
<div class="hoverzoom">
<img class="hoverzoom-image"
src="required"
data-large-image="optional"
data-blur="optional"
data-grayscale="optional"
data-type="optional"
data-position="optional"
>
</div>
Add 1 line of javascript to initialize:
<script>
const hoverZoom = new HoverZoom({
position: 'right', // 'right' | 'bottom' (only for type:
'outside')
type: 'outside', // 'outside' | 'inside'
blur: true, // apply blur filter
grayscale: true, // apply grayscale filter
});
hoverZoom.init();
</script>
Options
{
position: 'right', // right / bottom (if type: outside)
type: 'outside', // outside / inside
blur: true, // adds blur filter
grayscale: true, //adds grayscale filter
}
Module Import
// ES Module
import HoverZoom from 'hoverzoom-js';
import 'hoverzoom-js/style.css';
const hoverZoom = new HoverZoom({
position: 'right',
type: 'outside',
blur: true,
grayscale: true,
});
hoverZoom.init();
// CommonJS
const HoverZoom = require('hoverzoom-js');
require('hoverzoom-js/style.css');
const hoverZoom = new HoverZoom();
hoverZoom.init();
