Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

image-zoom-on-hover

teinorsa441.0.0

Zoom images when hovering without the need of a higher resolution

image, image-zoom, image-zoom-on-hover, zoom, zoom on hover, image zoom, zoom without good resolution, image zoom on hover, hover, photo, photo zoom, photo zoom on hover, light

readme

Image zoom on hover

Zoom images when hovering without the need of a higher resolution

Demo

You can see a demo into a demo/index.html

Usage

Just put the image into a container with the image-hover-zoom class and if you want you can add attribute scale to that div.

For example:

        <div class='image-hover-zoom' scale="2.0">
            <img src='https://dummyimage.com/600x400/000/fff'>
        </div>

Full example:

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
    <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh;">
        <div class='image-hover-zoom' scale="2.0">
            <img src='https://dummyimage.com/600x400/000/fff'>
        </div>
    </div>
    <script src='/index.js'></script>
</body>
</html>

In this case index.js is our zoom plugin