Живое тонирование

Градиентная тонировка непрерывно переливается по кругу тонов, ховер открывает оригинал.

Смотрите и наводите.

тонировка живёт · наведи — исчезнет

другая фаза

Код

<figure class="tint">
  <img src="photo.jpg">
  <u></u>          <!-- слой тонировки -->
</figure>

<style>
.tint { position: relative; overflow: hidden; }
.tint u { position: absolute; inset: 0;
  background: linear-gradient(135deg, #ff5db1, #7a5cff 55%, #39d0ff);
  mix-blend-mode: color;              /* красит, сохраняя светотень */
  opacity: .85; transition: opacity .5s;
  animation: hue 9s linear infinite; }  /* перелив тона */
.tint:hover u { opacity: 0; }           /* ховер открывает оригинал */
@keyframes hue { to { filter: hue-rotate(360deg); } }
</style>

Промпт для ИИ

Сделай живое тонирование фото: поверх картинки слой с градиентом (розовый→фиолет→голубой), mix-blend-mode: color — красит фото, сохраняя светотень; слою бесконечный hue-rotate(360deg) за 9s — тон медленно переливается по всему кругу. По ховеру слой уходит в opacity 0 и открывает оригинальные цвета. Разным карточкам — разные animation-delay, чтобы фазы не совпадали.