Увеличение изображения в Zero-блоке при наведении в рамках своих границ
Обычное увеличение картинки в Зеро-блоке можно сделать с помощью step-by-step анимации. Но что, если хочется добиться другого эффекта: когда вы наводите на изображение, размер изначальной области изображения не меняется, но при этом оно увеличивается (или уменьшается).
Эта инструкция поможет легко и быстро добиться желаемого результата. Работает как с изображением, так и с шейпом.
Эта инструкция поможет легко и быстро добиться желаемого результата. Работает как с изображением, так и с шейпом.
- Задайте класс для изображения img-zoom. Как задать класс читайте тут.
- Задайте размер увеличения / уменьшения (исчисляется в процентах).
- Выберите скорость увеличения / уменьшения (исчисляется в миллисекундах).
- Если необходимо, укажите радиус скругления изображения (исчисляется в пикселях).
- Скопируйте полученных код и вставьте в блок Т123 или в html-элемент в самом Zero-блоке.
<!-- Увеличение изображения в Zero-блоке при наведении в рамках своих границ | https://necodim.ru/tilda/image-zoom-on-hover -->
<style>
.img-zoom {
border-radius: 20px;
overflow: hidden;
}
.img-zoom .tn-atom {
border-radius: 20px;
transition: transform 200ms ease-in-out;
}
.img-zoom:hover .tn-atom {
transform: scale(115%);
}
</style>
Теперь вы можете увеличивать или уменьшать изображение в Zero-блоке при наведении.
Пример работы модификации
Наведите на изображение, чтобы увидеть эффект
