Наложение цвета в CSS

blend-color.html

<div class="block">
  <img class="img" src="image.png" alt="">
</div>

blend-color.scss

.block {
  position: relative();
}

.img {
  transition: 0.3s ease;
  filter: contrast(0) grayscale(1);

  :hover > & {
    filter: contrast(1) grayscale(0);
  }
}

@supports (mix-blend-mode: color) {
  
  $blend-color: #b0b6bf;

  .block {
    background: #ffffff;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;

      background: $blend-color;
      mix-blend-mode: color;
    }

    &:hover::after {
      opacity: 0;
      mix-blend-mode: inherit;
    }
  }
}