Image to a shadow (shape only) - CSS

Question

I have an img like this: example image and I want to transform it to an img like this: example shadow-image.

I tried filter: grayscale(100%); but it only transformed colors to greyscale, inner shapes survived.

So I want to change everything in image except transparency to black. How can I do it?

After grayscaling, increase contrast by more than 100%: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#contrast()_2 — connexo, Dec 03 '16 at 22:02
looks like closed, so my answer turns into comment **with filter, you may turn contrast and brightness down to 0:** http://codepen.io/gc-nomade/pen/ZBrvdL `filter:contrast(0%) brightness(0%)` — G-Cyrillus, Dec 03 '16 at 22:12
@PraveenKumar `filter:contrast(0%) brightness(0%)` is plenty enough, no need, here, of canvas or whatever , does it ? — G-Cyrillus, Dec 03 '16 at 22:14
@GCyrillus If you would add this as an answer I would accept it as helpful. — Brunon Blok, Dec 03 '16 at 22:19
@BrunonBlok , it needs to be reopen to add new answers. but you do have two usable answers here and overthere ;). — G-Cyrillus, Dec 03 '16 at 22:22
@PraveenKumar, this case is not :), only saying and answering for the filter:xx; asked about and where transparency should remain ;) — G-Cyrillus, Dec 03 '16 at 22:29

score 1 · Accepted Answer · edited May 23 '17 at 12:13

with filter, you may turn contrast and brightness down to 0:

img:hover,
img + img {
  /* black */
  filter: contrast(0%) brightness(0%);
}
img + img:hover {
  /* gray */
  filter: contrast(0%) brightness(100%);
}
img {
  transition: 0.5s
}

<img src="https://i.stack.imgur.com/M4Qup.png" />
<img src="https://i.stack.imgur.com/M4Qup.png" />

here is the codepen to play with http://codepen.io/gc-nomade/pen/ZBrvdL

note that if you are dealing with an image where

there is no transparency or is not to be used for the shape

is a background color set on img

it is not a translucide png or gif

it can be many image used

when transparency properties are unknown

then you may want to look at this other question Silhouette a PNG image using CSS which should fulfill your needs

Image to a shadow (shape only) - CSS

1 Answers1

Linked