Курсор с увеличительным стеклом

Эффект курсора с увеличительным стеклом реализован с помощью GSAP для плавной анимации и стилизован с использованием HTML/CSS. При взаимодействии (например, наведении на элемент) стандартный курсор заменяется анимированным увеличительным стеклом, которое масштабирует часть контента под ним. Анимация включает плавное появление стекла, изменение его размера и позиции, что усиливает интерактивность.

Что получится:

Наведи курсор на меня

Шаг 3.

Меняем на свой img.src = 'https://static.tildacdn.com/tild3532-3936-4636-b538-353864626262/02db5c87781811ee86f5.jpg';

Генерируем код в блоке ниже, копируем его. Добавляем на страницу блок HTML T-123

Шаг 4.

Вставляем в него полученный код.
Меняем в коде на свой img.src = 'https://static.tildacdn.com/tild3532-3936-4636-b538-353864626262/02db5c87781811ee86f5.jpg';
Публикуем страницу.

Шаг 1.

Добавляем на страницу ZeroBlock, размещаем на в нем шейп размер 400рх на 600рх, добавим шейпу класс box-wrapper, делаем алаптив.

Шаг 2.

Над шейпом размещаем изображение равное размеру шейпа, адаптируем их по высоте и ширине, добавляем изображению класс img

Забираем результат

|

сгенерировать код

Нужна помощь?

Установим код на Ваш сайт, вам останется только объяснить задачу и проверить результат