Блик по карточке

Диагональная полоса света проезжает по карточке один раз за наведение.

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

наведи — блик

как по кредитке

Код

<div class="card">
  <img src="photo.jpg">
</div>

<style>
.card { position: relative; overflow: hidden; }
.card::after { content: ""; position: absolute; inset: -40%;
  background: linear-gradient(105deg, transparent 38%,
    rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-80%) rotate(8deg);
  transition: none; }                    /* мгновенный сброс */
.card:hover::after {
  transform: translateX(80%) rotate(8deg);
  transition: transform .85s cubic-bezier(.4,0,.2,1); }
</style>

Промпт для ИИ

Сделай блик по карточке (как свет по кредитке): ::after с запасом inset:-40%, диагональная полоса света linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%), слегка повёрнутая rotate(8deg). В покое сдвинута translateX(-80%) БЕЗ transition (мгновенный сброс при уходе курсора); по ховеру едет к translateX(80%) с transition 0.85s — блик проезжает один раз за наведение.