CODEWITHSUNDEEP
htmlcssfilter
Brunon Blok
Brunon Blok

Reputation: 188

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 greyscale, inner shapes survived.

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

Upvotes: 2

Views: 326

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106048

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.sstatic.net/M4Qup.png" />
<img src="https://i.sstatic.net/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

Upvotes: 1

Related Questions