How do I make this effect when hovering over an image?

How do I make such a hover effect? Without hover, what effect should there be? What image format do you need?

These are CSS image filters that you can use to create various effects for images. Use the filter property. Here is an example:

• the first image uses a discoloration filter, where grayscale is applied to the image depending on the specified percentage;
• second sepia effect;
• third inversion images;

And these are just a few examples of using CSS filters.

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">