CODEWITHSUNDEEP
javascripthtmlcssreactjs
Prateek
Prateek

Reputation: 854

Show shape of transparent image

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>

Upvotes: 3

Views: 125

Answers (1)

Temani Afif
Temani Afif

Reputation: 272901

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>

Upvotes: 3

Related Questions