Увеличение изображения в Zero-блоке при наведении в рамках своих границ

Обычное увеличение картинки в Зеро-блоке можно сделать с помощью step-by-step анимации. Но что, если хочется добиться другого эффекта: когда вы наводите на изображение, размер изначальной области изображения не меняется, но при этом оно увеличивается (или уменьшается).

Эта инструкция поможет легко и быстро добиться желаемого результата. Работает как с изображением, так и с шейпом.

  1. Задайте класс для изображения img-zoom. Как задать класс читайте тут.
  2. Задайте размер увеличения / уменьшения (исчисляется в процентах).
  3. Выберите скорость увеличения / уменьшения (исчисляется в миллисекундах).
  4. Если необходимо, укажите радиус скругления изображения (исчисляется в пикселях).
  5. Скопируйте полученных код и вставьте в блок Т123 или в html-элемент в самом Zero-блоке.
<!-- Увеличение изображения в Zero-блоке при наведении в рамках своих границ | https://necodim.ru/tilda/image-zoom-on-hover -->
<style>
.img-zoom {
    border-radius: 20px;
    overflow: hidden;
}
.img-zoom .tn-atom__img,
.img-zoom .t-bgimg {
    border-radius: 20px;
    transition: transform 200ms ease-in-out;
}
.img-zoom:hover .tn-atom__img,
.img-zoom:hover .t-bgimg {
    transform: scale(115%);
}
</style>
Теперь вы можете увеличивать или уменьшать изображение в Zero-блоке при наведении.
Пример работы модификации
Наведите на изображение, чтобы увидеть эффект
Image
Размер: 90%
Скорость: 100ms
Радиус: 20px
Image
Размер: 150%
Скорость: 400ms
Радиус: 40px
Shape
Размер: 80%
Скорость: 500ms
Радиус: 10px
Shape
Размер: 200%
Скорость: 200ms
Радиус: 20px
Изначальные границы
Изначальные границы
Изначальные границы
Изначальные границы
Made on
Tilda