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!

CSS Grayscale

  • 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!

Pseudo element implementation

  • 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

Demo

https://codepen.io/maxcell/pen/RwGaxLE