Эффекты фото в карточках Tilda: зум, возврат цвета и шторка с подписью

Иногда не нужно двигать всю карточку: достаточно оживить фотографию, оставив название и кнопку на месте. Снимок может слегка увеличиваться, возвращать цвет или открывать короткую подпись.

В моде «Фокус на фото» эти варианты собраны в отдельных режимах. Разберём выбор изображения, настройку подписи и важное ограничение: один текст из конструктора применяется ко всему выбранному набору карточек.

В разделе «Где применять» ограничьте нужные блоки, затем добавьте карточки в список. Мод ищет фотографию внутри выбранного элемента. Если в карточке есть и обложка, и маленький значок, проверьте, какой из них попал под эффект.

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

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

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

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

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

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

Подпись общая для выбранного набора. Разные описания товаров автоматически в неё не подставляются. Поэтому «Открыть проект» подходит для нескольких работ, а конкретное название одного товара — уже нет. Важные условия, цену и уникальное описание оставьте в обычном содержимом карточки, доступном без наведения.

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

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

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

• Мод находит нужное изображение, а не иконку внутри карточки.
• При наклоне не открываются пустые углы.
• Зум не обрезает ключевую деталь кадра.
• Общая подпись подходит каждому выбранному элементу.
• Название, кнопка и переход остаются доступны на телефоне.

Если карточки устроены по-разному, проверяйте каждый тип отдельно.

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