Как сделать увеличение фото по клику в tilda

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

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

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

1. Задайте класс для изображения img-zoom. Как задать класс читайте тут.
2. Задайте размер увеличения / уменьшения (исчисляется в процентах).
3. Выберите скорость увеличения / уменьшения (исчисляется в миллисекундах).
4. Если необходимо, укажите радиус скругления изображения (исчисляется в пикселях).
5. Скопируйте полученных код и вставьте в блок Т123 или в html-элемент в самом Zero-блоке.

 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-блоке при наведении.

Пример работы модификации

Наведите на изображение, чтобы увидеть эффект

Image
Размер: 90%
Скорость: 100ms
Радиус: 20px

Image
Размер: 150%
Скорость: 400ms
Радиус: 40px

Shape
Размер: 80%
Скорость: 500ms
Радиус: 10px