Image To A Shadow (shape Only) - Css

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 grey

Solution 1:

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