Эффект при наведении на карточку тильда: как сделать своими стилями

Эффект при наведении на карточку тильда - одна из самых частых доработок, которые у меня заказывают на уже готовых сайтах. Клиент присылает референс: карточка чуть приподнимается, фото темнеет, появляется кнопка или второй товар. В Tilda часть таких эффектов есть в настройках блока, а часть приходится дописывать вручную через CSS. В статье покажу оба варианта на конкретном коде, который можно вставить в настройки сайта за 15-20 минут, без переезда на другой конструктор.

Что даёт эффект наведения на карточку в Tilda

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

Работаю чаще всего с блоками T321, T396, T580 (карточки с текстом), T595 (галерея), а также с товарными карточками T‑Store. У них разная верстка и разные CSS-классы, поэтому универсального кода, который подходит сразу всем блокам, не существует - селектор всегда приходится смотреть под конкретный блок перед тем, как что-то писать.

Прежде чем городить кастомный код, стоит понять, чего конкретно не хватает: часто нужный вариант уже есть в настройках блока, и время на CSS можно не тратить вовсе.

Готовые hover-настройки в блоках без кода

Часть эффектов Tilda даёт настроить без единой строчки CSS. В блоках галерей и карточек есть параметр «Стиль обложки» или «Эффект наведения» с вариантами вроде увеличения фото (zoom), затемнения или показа подписи. Находится это в панели настроек блока, вкладка «Стиль», иногда отдельным переключателем прямо у изображения карточки.

Ограничение у встроенных настроек простое: они работают только там, где Tilda их предусмотрела, и комбинировать несколько эффектов разом (например, одновременно поднять карточку, затемнить фото и показать кнопку) через интерфейс не получится. Как только нужен эффект, которого нет в списке, или его нужно применить точечно к одному конкретному блоку на странице, переходят на кастомный CSS.

Свой CSS-эффект наведения: подключение и код

Код вставляю в «Настройки сайта» → «Ещё» → «Дополнительный код» (в футер) либо в HTML-блок T123 прямо на странице, если эффект нужен только там. Второй вариант удобнее для точечных правок, потому что не влияет на остальные страницы сайта.

Перед тем как писать CSS, смотрю класс карточки через инструменты разработчика в браузере (клик правой кнопкой → «Просмотреть код»). У большинства текстовых и карточных блоков Tilda верстка похожа: снаружи обёртка вроде .t396__card, внутри картинка и текстовый блок. Базовый эффект поднятия карточки с тенью выглядит так:

.t396__card {
  transition: transform .25s ease, box-shadow .25s ease;
}

.t396__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .15);
}

Если эффект должен работать только на одном конкретном блоке, а не на всех карточках такого типа на сайте, добавляю в начало селектора ID записи блока (он виден в настройках блока, поле «ID блока»):

#rec612345678 .t396__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .15);
}

Такой подход исключает остальные блоки на сайте из-под изменений и снимает риск, что через полгода забудешь, откуда взялся глобальный hover на всех карточках подряд.

Производительность: что анимировать, а что нет

Анимировать напрямую width, height, top или left не стоит - браузер на каждый кадр пересчитывает раскладку страницы (reflow), и на слабых телефонах карточки будут дёргаться. Плавно и без нагрузки работают только transform и opacity, потому что их обрабатывает композитор, минуя пересчёт раскладки. Тень тоже дороже, чем кажется: box-shadow пересчитывается на каждый кадр, поэтому на карточках, где их много на экране одновременно (например, в каталоге на 20-30 товаров), лучше анимировать тень через псевдоэлемент с своим opacity, а не сам box-shadow.

Затемнение и текст поверх изображения при наведении

Второй частый запрос - плашка с текстом, которая появляется поверх фото при наведении. Делается это через отдельный слой внутри карточки с нулевой прозрачностью в состоянии покоя:

.t396__card .t396__mask {
  opacity: 0;
  background: rgba(20, 20, 20, .55);
  transition: opacity .3s ease;
}

.t396__card:hover .t396__mask {
  opacity: 1;
}

.t396__card .t396__descr {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease .05s, transform .3s ease .05s;
}

.t396__card:hover .t396__descr {
  opacity: 1;
  transform: translateY(0);
}

Класс .t396__mask в примере условный - под конкретный блок Tilda название элемента внутри карточки нужно смотреть в верстке, оно отличается от блока к блоку (иногда это отдельный div с классом cover, иногда псевдоэлемент). Логика везде одна: элемент прячут прозрачностью, а не через display: none, потому что display не анимируется и переход будет резким, без плавности.

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

Ховер для карточек каталога и товарных блоков T‑Store

В карточках интернет-магазина на Tilda часто просят сделать смену фото на второе при наведении - типичный паттерн для одежды и обуви, где на второй картинке товар показан с другого ракурса. Для товарных карточек T‑Store структура своя, там задействованы классы вроде .js-product-img и обёртка .js-store-prod-wrap:

.js-store-prod-wrap .js-product-img:nth-child(2) {
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity .3s ease;
}

.js-store-prod-wrap:hover .js-product-img:nth-child(2) {
  opacity: 1;
}

Эффект требует, чтобы у товара было загружено минимум два изображения, и родительский блок карточки имел position: relative - иначе второе фото уедет за пределы карточки, а не встанет поверх первого. Проверяю это сразу на нескольких карточках каталога, а не на одной: у части товаров фото могут быть с другим соотношением сторон, и эффект нужно смотреть с реальным контентом, а не на тестовой заглушке.

Если каталог собран на T‑Store и вдобавок нужно завязать hover на данные из фида, например показывать бейдж «Хит» только для товаров с определённым тегом, или подтягивать остатки по СДЭК прямо в карточку, такие вещи проще делать через доработку сайта на Tilda под задачу, потому что там уже нужен JS поверх CSS, и без тестирования на реальном каталоге легко сломать верстку у части товаров.

Типичные ошибки при настройке hover-эффектов

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

• Глобальный селектор вместо блока с ID. Правят один блок, а эффект прилетает на все карточки такого типа на сайте, включая те, где он не нужен и выглядит чужеродно.
• Забытый или, наоборот, лишний overflow: hidden у родителя. Если эффект должен выходить за границы карточки, например увеличенная тень или чуть больший масштаб фото, overflow: hidden его просто обрежет.
• Ховер «залипает» на мобильных. У сенсорных экранов нет состояния наведения в привычном смысле, а браузер иногда трактует тап как hover, и эффект не убирается, пока не тапнешь в другое место на странице.
• Эффект пропадает после обновления блока в Tilda. Конструктор время от времени меняет разметку внутри библиотечных блоков, и жёстко прибитый класс вроде .t396__title может однажды перестать существовать в новой версии блока.

Проблему с залипанием на мобильных решаю проверкой поддержки hover через matchMedia и навешиванием эффектов только там, где наведение действительно работает как ожидается:

if (window.matchMedia('(hover: hover)').matches) {
  document.documentElement.classList.add('has-hover');
}

CSS-правила при этом переписываю с префиксом .has-hover перед селектором карточки, чтобы на тач-устройствах эффект просто не применялся, а не зависал в промежуточном состоянии после тапа. Отдельно проверяю карточки на клавиатурной навигации: если элемент кликабельный, состояние hover дублирую через :focus-visible, иначе пользователь, который переключается по Tab, не увидит вообще никакой обратной связи.

Частые вопросы

Почему hover-эффект работает на компьютере, но не на телефоне?

Так и должно быть по умолчанию, у сенсорных экранов нет наведения как состояния. Если нужно похожее поведение на мобильных, эффект переделывают под тап: класс добавляется через JS по клику на карточку, а не пытаются симулировать hover средствами CSS.

Как узнать точный класс карточки для CSS, если он не подходит из примеров в статье?

Открываю карточку на сайте, кликаю правой кнопкой мыши по нужному элементу и выбираю «Просмотреть код» (Inspect). В панели разработчика видно вложенность div-ов и точные классы конкретного блока - примеры в статье условные, потому что верстка отличается между T321, T396 и T‑Store.

Можно ли сделать разные эффекты наведения для разных карточек на одной странице?

Да, для этого у каждого блока в Tilda есть свой ID записи, поле «ID блока» в настройках. Добавляя его в начало CSS-селектора, ограничиваю действие стиля одним конкретным блоком, а не всеми карточками такого типа на сайте сразу.

Сломается ли кастомный hover после обновления Tilda?

Риск есть, но небольшой: Tilda меняет верстку библиотечных блоков не часто. Если после обновления эффект пропал, проверяю через инспектор, не изменилось ли название класса у элемента, и правлю селектор в коде на актуальный.