Смена фото градиентом при наведении — новое фото проявляется мягкой полосой

Что это за эффект

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

Полоса может идти сверху вниз, снизу вверх, слева направо, справа налево или по диагонали. Её ширину можно менять: от резкого края до широкого мягкого перехода. Эффект сделан по мотивам карточек на kuro-coffee-template.modulify.website.

Где использовать

• Товар до и после: упаковка и товар в деле, интерьер днём и вечером.
• Портфолио: обложка проекта и кадр изнутри.
• Команда: официальное фото и неформальное.

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили, разметку и скрипт и подставит ваши фото. Ваши настройки сохранятся.

Вручную. «Скачать код» даёт готовую HTML-страницу с вашими настройками. «Скопировать код» копирует только стили, разметку и скрипт. Скрипт без зависимостей.

<a class="card" href="/project/" data-swap-card>
  <img data-swap-from src="cover.jpg" alt="Обложка проекта">
  <img data-swap-to src="inside.jpg" alt="">
</a>

createGradientSwap(document.querySelector('.cards'), { direction: 'down', soft: 40 });

Настройки

• Направление — куда идёт полоса.
• Мягкость полосы — насколько широк размытый переход. При нуле край резкий.
• Длительность — время, за которое полоса проходит карточку.
• Увеличение — с какого масштаба новое фото успокаивается до обычного.

Доступность и производительность

Карточка остаётся обычной ссылкой, и фото меняется и от фокуса с клавиатуры. Если в системе включено «Уменьшить движение», фото меняется сразу. Анимацию ведёт сам браузер: скрипт только задаёт настройки и отмечает карточку под курсором, кадров он не считает.

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

В каких браузерах работает? Во всех современных: Chrome, Safari, Firefox и Edge. Нужна поддержка @property, она есть везде с 2023–2024 года. В старых браузерах фото просто сменится без полосы.

Работает ли на телефоне? Да, фото меняется при касании карточки.