Эффект увеличительного стекла - часть 2 ⇐ CSS

[Anonymous]

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

Код: Выделить всё

// The magnification factor; an integer greater than 1
const zoom = 3;
// The radius of the glass (as a percentage of the image's width)
// a number between 1 and 100, inclusive
const radius = 25;

const container = document.querySelector('.container');
const glass = document.querySelector('.glass');
const { style } = glass;
style.setProperty('--zoom', zoom);

// Add the magnified image as a clone
// This way it'll include any filter applied to the original image
const img = container.querySelector('img').cloneNode();
glass.append(img);

container.addEventListener('mousemove', (e) => {
// ISSUE: The diameter of the glass is, as the magnification gets bigger, smaller than expected
const clipPath = `${radius / zoom}% at ${e.offsetX * zoom}px ${e.offsetY * zoom}px`;

style.setProperty('--clip-path', clipPath);
style.setProperty('--left', `${(zoom - 1 ) * -e.offsetX}px`)
style.setProperty('--top', `${(zoom - 1 ) * -e.offsetY}px`)
});

Код: Выделить всё

.container {
position: absolute;
width: 40%;
height: fit-content;
left: 8%;
top: 20%;
border: 1px dashed grey;
overflow: hidden;
cursor: none;

&> img {
width: 100%;
height: auto;
display: block;
}

&:hover .glass {
opacity: 1;
}

.glass {
position: absolute;
left: var(--left);
top:  var(--top);
width: 100%;
height: auto;
clip-path: circle(var(--clip-path));
pointer-events: none;
transition: opacity 0.2s;
opacity: 0;

img {
width: calc(var(--zoom) * 100%);
display: block;
}
}
}

Код: Выделить всё

[img]https://i.sstatic.net/Z4aOFrum.jpg[/img]

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

Подробнее здесь: https://stackoverflow.com/questions/791 ... ect-part-2