Показать форму прозрачного изображения

Question

Мне нужно создать на странице страницу с изображением.

Здесь я могу показать только форму прозрачного изображения, используя яркость, а затем удалить яркость, чтобы показать изображение.

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

Как я могу сделать это, используя css и / или javascript?

.mask-img{
  width:50%;
  filter: brightness(0);
}

<div class="container">
	<img class='mask-img' src="https://picsum.photos/id/1001/800/800">
</div>

Answer 1

Используйте mix-blend-mode. Цвет и стоимость смеси будут зависеть от каждого случая, поэтому вам нужно настроить его в зависимости от изображения.

.mask-img {
  width: 50%;
}
.container {
  position:relative;
  z-index:0;
  background:#fff;
}
.container:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:red;
  mix-blend-mode:hue; /* or 'color' to get a different effect */
  opacity:1;
  transition:0.5s;
}
.container:hover::after {
   opacity:0;
}

<div class="container">
  <img class='mask-img' src="https://picsum.photos/id/1001/800/800">
</div>