Увеличение карточек при наведении в Tilda: как настроить аккуратно

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

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

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

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

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

Обратите внимание на исходный .js-product: он выбирает карточки товаров на странице. Если нужен только один каталог, сузьте запись до конкретного блока. После установки проверьте остальные товары, в том числе в других секциях. Так вы заметите слишком широкий выбор до того, как начнёте подгонять под него всю страницу.

Значение 1 означает исходный размер, 1.05 — 105 процентов от него. Попробуйте небольшое увеличение и наведите курсор на крайние карточки ряда. Обычно именно там виднее всего, хватает ли свободного места.

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

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

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

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

Добавьте готовый код в T123 после выбранных блоков и опубликуйте страницу. Проверьте первый и последний товары, длинные названия и кнопки у нижнего края. Затем откройте страницу уже после загрузки дополнительных карточек, если каталог умеет их подгружать. Не ограничивайтесь красивым центральным элементом из превью конструктора.

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

• Проверьте ширину чуть меньше и чуть больше 1200 px.
• Наведите курсор на крайние карточки и быстро уберите его.
• Нажмите на фото, название и кнопку товара.
• На телефоне проверьте обычные карточки без ожидания hover-эффекта.

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