Show shape of transparent image

Question

I need to make a image revealing section on my page.

Here, I can show the just the shape of the transparent image using brightness and then later remove the brightness to reveal the image.

By default i get a black shape using brightness as seen in my snippet. I need to do the same thing but by changing the color for shape. I need to show the shape of the transparent image with a different color, red in my case.

How can I do this using css and/or javascript?

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

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

Since its image, I doubt you can plain with it. You might need to maintain multiple images and based on logic show necessary image — Rajesh, Feb 04 '20 at 10:40
see this topic : https://stackoverflow.com/questions/9163283/change-png-color-using-javascript-jquery-and-css — Neo Anderson, Feb 04 '20 at 10:42

Temani Afif · Accepted Answer · 2020-03-04T20:24:02.310

Use mix-blend-mode. The coloration and the value of the blend will depend on each case so you need to adjust it based on the image.

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

Show shape of transparent image

1 Answers1