Для создания анимации, похожей на эффект зума, вам понадобится использовать JavaScript и CSS.
1. HTML-разметка:
<div id="container"> <img src="image.jpg" id="image" alt="Image"> </div>
2. CSS-стили:
#container { width: 400px; /* Задайте ширину и высоту контейнера в соответствии с требуемым размером зума */ height: 400px; overflow: hidden; /* Скрываем все, что выходит за пределы контейнера */ } #image { width: 100%; /* Устанавливаем изначальный размер изображения */ height: 100%; transition: transform 0.5s ease; /* Добавляем плавную анимацию для свойства transform */ } .zoomed { transform: scale(2); /* Увеличиваем масштаб изображения в 2 раза */ }
3. JavaScript код:
var image = document.getElementById('image'); image.addEventListener('click', function() { image.classList.toggle('zoomed'); /* При клике на изображение добавляем/удаляем класс zoomed */ });
Обратите внимание, что в данном примере реализован простой эффект зума по клику на изображение. При повторном клике, изображение вернется в исходный размер. Вы можете настроить длительность анимации и другие параметры, изменяя CSS-свойства и значения в JavaScript коде.