Маска при наведении — фигура раскрывается на всю карточку, а фото внутри приближается

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

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

Форм четыре:

• Квадрат — наклонённый квадрат со скруглёнными углами в правом верхнем углу. Раскрываясь, он немного выпрямляется.
• Арка — окно с полукруглым верхом поднимается снизу и заполняет карточку.
• Ромб — квадрат, стоящий на углу, растёт из центра.
• Круг — растёт из центра, пока не дойдёт до углов.

Идея взята с карточек на matilda-template.tilda.ws, но формы и код свои.

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

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

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

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

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

<a href="/interiors/" data-mask-card data-mask-shape="arch">
  <div class="picture"><div class="layer" data-mask><img src="photo.jpg" alt=""></div></div>
  Интерьеры
</a>

createMaskHover(document.querySelector('.cards'), { shape: 'mixed', zoom: 1.1 });

Настройки

• Форма — одна на все карточки или «Все»: тогда у каждой своя, из data-mask-shape.
• Размер фигуры — насколько велико окошко в покое.
• Наклон и Скругление — для квадрата и ромба.
• Увеличение — насколько приближается фото, когда маска раскрыта.
• Длительность — время раскрытия.

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

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

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

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

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