В CSS есть эффект, который позволяет наводиться на изображение с помощью Hover-эффекта.

Профессиональный дизайн сайта часто привлекает заказчика, когда при неведении на фото в товарах или галереях меняется оттенок. Например с черного цвета можно перейти к цветному и наоборот. С помощью различных методов можно изменить оттенок и цвет фотографии по наведению на нее курсора. Сейчас мы рассмотрим эффект наведения на изображение с помощью фильтра CSS.

HTML код

<div>
  <img class="black-color" src="/img/po1.png" />
</div>

CSS код

.black-color {
  transition: filter .7s ease-in-out;
  -webkit-filter: grayscale(0%); 
  filter: grayscale(0%); 
}
 
.black-color:hover {
  -webkit-filter: grayscale(99%); 

  filter: grayscale(99%); 
}

скачать dle 12.0