CODEWITHSUNDEEP
htmlcss
jackcogdill
jackcogdill

Reputation: 5122

Grayscale on only part of an image?

Is it possible in css to make only part of an image grayscale?
I have tried using filters to no avail, can't seem to think of any way to accomplish this. Do you have any ideas?

I want to make this image grayed out only under the dark part of this page.

Image

Upvotes: 3

Views: 2316

Answers (1)

alex
alex

Reputation: 490263

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

  1. Use a div and set its background-image to the image.
  2. Set the background-position and absolutely position it so it appears to be the same image.
  3. Use CSS to set the grayscale on the div.

jsFiddle.

For the exact thing that you're going for, I might make it have a black background with opacity set as required, and a top inset shadow for the top effect.

Upvotes: 6

Related Questions