Анимация скругления карточек в Tilda: меняем форму при наведении

Карточка может реагировать на курсор без прыжков и сильного увеличения: достаточно плавно изменить её углы. Например, слегка округлить прямоугольник или сделать асимметричную форму у обложки проекта.

Конструктор анимации скругления задаёт два состояния одного элемента — обычное и при наведении. Ширина, высота и содержимое не меняются. Ниже разберём, как выбрать нужный контейнер и не оставить прямоугольную фотографию внутри округлой карточки.

В конструкторе выберите стандартный блок и нужную карточку или контейнер. Проверьте итоговый селектор. Значение .t774__wrapper по умолчанию подходит соответствующей структуре блока, а не любой карточке Tilda.

Начните с одного блока, где видны фон, фотография и границы элемента. Наведите курсор и посмотрите, что должно меняться: вся карточка или только её обложка. Если выбрать внешний контейнер, а изображение устроено отдельно, ожидания могут не совпасть с результатом. Лучше определить владельца формы до настройки красивых радиусов.

В режиме одинакового скругления один радиус применяется ко всем углам. Это удобный способ начать: например, сделать форму немного мягче при наведении, не меняя её характер полностью. Для асимметрии переключитесь на отдельные значения углов.

Настройки обычного состояния и наведения независимы. Чтобы менять только два угла, оставьте остальные одинаковыми в обоих состояниях. Проверяйте форму на карточках разной высоты и с длинным названием. Радиус, который выглядит умеренным на крупном изображении, на небольшой карточке может занять слишком большую часть края.

Задайте длительность и кривую движения. Несколько раз наведите курсор на превью и уберите его. Возврат к обычной форме должен выглядеть так же аккуратно, как само изменение, особенно при быстром движении между соседними карточками.

Если угол меняется почти мгновенно, эффект может быть похож на случайный скачок оформления. Если слишком медленно — посетитель успеет уйти, пока карточка ещё продолжает перестраиваться. Подбирайте скорость вместе с общим стилем страницы. Важнее последовательная реакция всех карточек, чем сильное отличие одного эффектного примера.

Мод меняет border-radius выбранного элемента. Это не гарантирует, что отдельное вложенное изображение тоже получит нужную форму. У фотографии могут быть собственные углы и правила обрезки.

Если фон округлился, а фото осталось прямоугольным, посмотрите устройство карточки и настройки её изображения. Не увеличивайте внешний радиус в надежде скрыть проблему. Сначала согласуйте форму контейнера и картинки. Проверьте и другие вложенные элементы: плашку категории, цену или кнопку у края. При новой форме они не должны оказываться за видимой границей.

Скопируйте код в T123 после выбранного блока и опубликуйте страницу. Если этому же элементу уже задаёт скругление другой код, согласуйте правила. Несколько разных настроек радиуса могут давать смешанное состояние, которое не похоже ни на одно из превью.

Проверьте обычный вид до первого наведения и после него. Мод не меняет ширину и высоту, поэтому для увеличения всей карточки нужен отдельный эффект. Если используете оба приёма, проверяйте их вместе на реальных соседних элементах, а не только на одном изолированном прямоугольнике.

Сгенерированные правила работают на ширине от 1200 px. На более узких экранах остаются исходные стили блока, поэтому базовое скругление стоит заранее настроить аккуратно в самой Tilda.

• На большом экране все выбранные карточки меняют нужные углы.
• При быстром наведении форма плавно возвращается назад.
• Вложенные фотографии не торчат прямоугольниками.
• На телефоне обычная карточка выглядит завершённой без эффекта.

Если важная часть изображения пропадает за большим радиусом, уменьшите его: форма должна помогать фотографии, а не отрезать содержимое ради анимации.

Читайте также: 3D-карточки в Tilda: наклон за курсором и переворот · Сетка товаров в Tilda: как настроить карточки в ряд на разных экранах.