Дуотон по ховеру

Фото окрашено в фирменный цвет через mix-blend luminosity и «оживает» при наведении.

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

наведи

и сюда

Код

<figure class="duo">
  <img src="photo.jpg">
</figure>

<style>
.duo { background: #E84B16;              /* цвет дуотона */
  overflow: hidden; border-radius: 16px; }
.duo img { width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: luminosity;            /* фото красится фоном */
  opacity: .9; filter: contrast(1.05);
  transition: opacity .45s; }
.duo:hover img { mix-blend-mode: normal; opacity: 1; }
</style>

Промпт для ИИ

Сделай дуотон-фото с оживлением по ховеру: контейнер с цветным фоном (акцент бренда), картинка внутри с mix-blend-mode: luminosity — её яркость красится цветом подложки, получается фирменный дуотон; лёгкий contrast(1.05) для плотности. По ховеру blend возвращается в normal — фото «оживает» в цвете. Разным карточкам — разные цвета подложек.