Image-zoom-on-hover NPM

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

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

@everything-registry/sub-chunk-1903 @zalastax/nolb-image-@infinitebrahmanuniverse/nolb-image-

1.0.0

4 years ago