Ховеры карточек

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

Наведите на каждую карточку.

Подъём

translateY(−9px) + тень

Зум фото

рамка стоит, фото плывёт

Подчёркивание

линия растёт слева направо

Код

<style>
/* пружинная кривая — секрет «дорогого» движения */
:root { --spring: cubic-bezier(0.16, 1, 0.3, 1); }

/* 1. подъём карточки */
.card { transition: transform .3s var(--spring), box-shadow .3s; }
.card:hover { transform: translateY(-9px);
  box-shadow: 0 22px 50px rgba(0,0,0,.14); }

/* 2. зум фото внутри (рамка стоит, фото плывёт) */
.card .ph { overflow: hidden; border-radius: 12px; }
.card .ph img { transition: transform .5s var(--spring); }
.card:hover .ph img { transform: scale(1.12); }

/* 3. растущее подчёркивание ссылки */
.link { text-decoration: none; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor)
    no-repeat 0 100%; background-size: 0% 2px;
  transition: background-size .35s var(--spring); }
.link:hover { background-size: 100% 2px; }
</style>

Промпт для ИИ

Добавь карточкам с фото три ховер-приёма: (1) карточка приподнимается translateY(-9px) с ростом мягкой тени; (2) фото внутри увеличивается scale(1.12) за 0.5s — рамка с overflow:hidden стоит на месте, плывёт только фото; (3) ссылки — растущее подчёркивание через background linear-gradient(currentColor,currentColor) no-repeat 0 100%, background-size от 0% 2px до 100% 2px. Все переходы по пружинной кривой cubic-bezier(0.16,1,0.3,1).