image-zoom-on-hover
v1.0.0
Published
Zoom images when hovering without the need of a higher resolution
Downloads
18
Maintainers
teinor_saReadme
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