Масштабирование картинки при наведении в своих границах в Zero-блоке

У Zero-блока есть пошаговые анимации, но они увеличивают весь элемент: он налезает на соседей и сдвигает вёрстку. Здесь эффект другой — область остаётся на месте, а изображение внутри неё растёт, и всё, что выходит за границы, обрезается.

Что настраивается

• Класс элемента — тот же, что вы зададите изображению или фигуре в настройках элемента.
• Размер при наведении — больше 100 % увеличивает, меньше уменьшает.
• Скорость перехода.
• Скругление углов — или ноль, чтобы оставить то скругление, которое задано в настройках элемента.

Как это работает

Внешняя рамка элемента обрезает всё лишнее, а масштабируется только сама картинка внутри неё. Поэтому соседние элементы не сдвигаются, а скругление углов сохраняется и во время анимации.

Анимируется единственное свойство — трансформация. Это и дешевле для браузера, и безопаснее: правило со звёздочкой цепляло бы заодно всё, что Тильда меняет у элемента сама.

Что учтено

• На сенсорных экранах эффект не включается: иначе картинка залипала бы увеличенной после касания.
• При системной настройке «уменьшить движение» увеличение отключается.
• Скругление можно не задавать — тогда код не перебивает то, что выставлено в настройках элемента.
• Селекторы покрывают и изображение Zero-блока, и фигуру с картинкой, и обычные блоки Тильды с картинками.

Где работает

• Zero-блок — изображение, фигура с картинкой в фоне, кнопка, текстовый блок с фоном. Задайте элементу класс в его настройках и впишите тот же класс в поле ниже.
• Обычные блоки — галереи, карточки товаров, обложки, любые блоки с картинками. Класс им задать негде, поэтому впишите ID блока: #rec123456789. Увеличиваться будут все картинки внутри, каждая в своих границах.

Ограничения

Класс нужно задавать самому элементу, а не блоку целиком: у блока под правило попадёт ещё и фоновое изображение Zero-блока. Если у элемента включена пошаговая анимация Тильды, она тоже управляет трансформацией — два эффекта на одном элементе будут спорить.