Как поправить зум-объектив, чтобы он не прыгал и чтобы отображался согласно изображению, на котором он находится, и пока ⇐ CSS

[Anonymous]

Как сделать, чтобы объектив не прыгал, когда он находится на первом изображении, и правильно отображать результат масштабирования на div результата масштабирования?
И как можно сделать линза появляется на других изображениях, а не только на первом, как на гифке? Если нет, проследите за курсором и положением других изображений, кажется, что результат масштабирования с позицией курсора правильный.


Я использую сетку для отображения в сетке или линейке изображений, к которым применяется эффект масштабирования.
это мой CSS-код:
.imagen__cont__zoom .grid_contenedores {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}

.imagen__cont__zoom .cont__img {
width: 100%;
overflow: hidden;
}

.imagen__cont__zoom .cont__img img {
width: 300px;
height: 300px;
/*object-fit: cover;*/
}

.img__zoom__lente {
position: absolute;
border: 1px solid #d4d4d4;
width: 40px;
height: 40px;
}

.img__zoom__resultado {
border: 1px solid #d4d4d4;
width: 300px;
height: 300px;
}

В html я добавляю несколько изображений, к которым применяю масштабирование.
это мой html-код:





















Я считаю, что способ расчета положения линзы у меня неправильный, поэтому по изображению не показано, где расположена линза, то есть в реальная позиция курсора.
это мой код JavaScript:
var imgs, lens, result, cx, cy;
imgs = document.querySelectorAll('.img__zoom');
result = document.querySelector('.img__zoom__resultado');
lens = document.querySelector('.img__zoom__lente');

// Función para mover la lente
function moveLens(e) {
var pos, x, y, img;

// Calcula la posición de la lente
pos = getCursorPos(e);
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
img = e.target;

// Evita que la lente se salga de la imagen
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}

// Establece la posición de la lente
lens.style.left = x + "px";
lens.style.top = y + "px";

// Calcula la relación entre el resultado y la lente
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;

// Ajusta el tamaño del resultado
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";

// Muestra el resultado
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}

// Función para obtener la posición del cursor
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
a = e.target.getBoundingClientRect();
x = e.pageX - a.left;
y = e.pageY - a.top;
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}

// Agrega el evento de movimiento del mouse a cada imagen y a la lente
imgs.forEach(function(img) {
img.addEventListener("mousemove", moveLens);
});
lens.addEventListener("mousemove", moveLens);


Подробнее здесь: https://stackoverflow.com/questions/783 ... s-displaye