Silhouette with CSS filters

Question

I have a list of organization logos on a web page. Most of them use a couple of different colors. I would like to show the silhouette of the logos, and only reveal the real colors on hover.

body {
  background: deeppink;
}

img {
  filter: brightness(0) invert(1);
}

img:hover {
  filter: none;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/240px-Stack_Overflow_icon.svg.png" />

I can make the logos white with the code above, but I would like to make them pink. And not just any pink, I would like to use a specific color code.

I have tried to add the hue-rotate() function, but the logos are still white. I guess it's because of the brightness level.

Any ideas?

EDIT: More precise code

something like this silhouette using filter? [Older stackoverflow article](https://stackoverflow.com/questions/4215475/silhouette-a-png-image-using-css/22085939) — granite, Feb 04 '23 at 00:22
@granite I have fiddled with `mix-blend-mode`, but it did not work well. Although, setting a slight opacity did the job. — Nekomajin42, Feb 04 '23 at 01:52

score 0 · Answer 1 · answered Feb 13 '23 at 19:22

It's not an optimal solution, but adding opacity will work, if the background itself is the same color as you want for the silhouette.

body {
  background: deeppink;
}

img {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

img:hover {
  filter: none;
  opacity: 1;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/240px-Stack_Overflow_icon.svg.png" />

Silhouette with CSS filters

1 Answers1