Adding grayscale only to background
CSS has a lot of powerful built-in tools that allow us to customize how we want to make things appear. At work, I was asked to give an element a tint of a specific color on a hover that made it appear slightly grayscaled and to give the text a darker color. I thought to myself: "Well, this should be a perfect case for the grayscale filter"! Unfortunately, my initial implementation was didn't quite solve it. However, I learned a few things along the way that I will help you with the same issue!
- Show an example of a box with text on it
- Gray scale it
- talk about what happens
So grayscale couldn't solve it for us, what else could we do? We could try using a pseudo element instead!
- Utilizing a pseudo element allows us to configure the "tint" and its strength
- We can also strictly apply the effect only onto the background as opposed to the text color