Как сделать такой эффект при наведении на картинку?

Question

Как сделать такой hover эффект? Без hover'а должен быть какой эффект? Какой формат изображения нужно?

Answer 1

Как сделать такой hover эффект? Без hover'а должен быть какой эффект? Какой формат изображения нужно?

Это CSS фильтры изображений, с помощью которых можно создавать различные эффекты для изображений. Используйте свойство filter. Вот пример:

первая картинка использует фильтр обесцвечивания, где применяются оттенки серого цвета к изображению в зависимости от указанного процента;
вторая эффект сепия;
третья инверсии изображения;

И это только несколько примеров использования CSS фильтров.

img {
  display: inline-block;
  height: 100px;
  width: auto;
  margin: 10px;
}

.filter__01 {
  filter: grayscale(100%);
}

.filter__02 {
  filter: sepia(100%);
}

.filter__03 {
  filter: invert(70%);
}

.filter__01:hover,
.filter__02:hover,
.filter__03:hover {
  filter: none;
}

<img src="https://s1.1zoom.me/b5050/568/416322-svetik_3840x2400.jpg" class="filter__01">
<img src="https://s1.1zoom.ru/b5748/47/Meat_products_Potato_Orange_fruit_White_background_548644_800x600.jpg" class="filter__02">
<img src="https://s1.1zoom.ru/b5152/233/Meat_products_Potato_Vegetables_White_background_535614_1400x1050.jpg" class="filter__03">

БЛОГ НА HUSL

Как сделать такой эффект при наведении на картинку?

Ответы (1 шт):