Часто на сайтах интернет-магазинов используют такую технику, которая позволяет увеличивать изображения при наведении на него курсора мыши. При этом достигается эффект цифровой лупы, когда товар можно посмотреть, так сказать, со всех сторон.

Далее я покажу пример реализации такого рода технологии. Сначала напишем HTML разметку:

Код:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Цифровая лупа на чистом JS</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>
<body>


<div class="zoomer" onmousemove="zoom(event)"
     style="background-image: url(zoom-image-2.jpg);" >
    <img src="zoom-image-2.jpg" />
</div>

<div class="zoomer" onmousemove="zoom(event)"
     style="background-image: url(zoom-image.jpg);" >
    <img src="zoom-image.jpg" />
</div>

</body>
</html>

Далее необходимо в файл style.css добавить следующий код:

Код:
 .zoomer {
    background-position: 50% 50%;
    position: relative;
    width: 500px;
    overflow: hidden;
    cursor: zoom-in;
}

.zoomer img:hover {
    /*
    * скрываем начальное изображение
    * при наведении курсора на блок
    */
    opacity: 0;
}

.zoomer img {
    transition: opacity .5s;
    display: block;
    width: 100%;
}

И вот собственно сам JavaScript код для создания цифровой лупы:

Код:
function zoom(event) {
    let zoomer = event.currentTarget;

    event.offsetX ? (offsetX = event.offsetX) : (offsetX = event.touches[0].pageX);
    event.offsetY ? (offsetY = event.offsetY) : (offsetX = event.touches[0].pageX);

    let x = offsetX / zoomer.offsetWidth  * 100;
    let y = offsetY / zoomer.offsetHeight * 100;

    zoomer.style.backgroundPosition = x + "% " + y +"%";
}

Вот так можно реализовать увеличение изображения, как при просмотре лупой, на чистом JavaScript.

Android 8.1.0, Chrome,70.0.3538.110