Clever Geek Handbook

Grayscale only on part of the image?

Is it possible in css to render only part of the image in grayscale?
I've tried using filters to no avail, can't imagine any way to achieve this. Do you have any ideas?

I want to gray out this image just under the darker part of this page.

Image

+3


source to share


1 answer


I've done something like this before to achieve this ...

  • Use div

    and set it background-image

    to the image.
  • Install background-position

    and fix it so that it looks like the same image.
  • Use CSS to set grayscale to div

    .


jsFiddle .

For what you are doing, I could make it a black background with opacity

set as needed and a top inset for the top effect.

+6


source






More articles:


All Articles