Skip to content Skip to sidebar Skip to footer

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


Post a Comment for "Image To A Shadow (shape Only) - Css"