<p>CSS-фильтры (1) и Псевдоэлемент (2)</p>
<div>
<img class="img1" src="https://biographicsworld.com/wp-content/uploads/2019/04/Carmella-Rose.png">
</div>
<div class="block2">
<img class="img2" src="https://pbs.twimg.com/profile_images/1024298302404288512/76c0qwug.jpg"/>
</div>
div {
  display: inline-block;
  padding: 0;
}
img {
  position: relative;
  height: 350px;
}
.img1:hover {
  -webkit-filter: grayscale(.75);
  filter: grayscale(.75);
  transition: 0.7s all ease;
}
.block2 {
  position: relative;
}
.block2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 350px;
  height: 350px;
  background: #c14f4f;
  z-index: 2;
  opacity: 0;
}
.block2:hover::before {
  opacity: 0.4;
  transition: 0.7s all ease;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.