Discussion on: How to make Dynamic Text Overlays on Images

[Andrew Bone]

It's these 3 lines that I don't like.

{
  background-clip: text;
  color: transparent;
  filter: invert(1) grayscale(1) contrast(9);
}

What we're doing is

• removing bits of the span not covered by text
• making the text invisible
• applying filters to the span
  • inverting the colour
  • setting it to grayscale
  • setting the contrast high so we just get black and white.

But it doesn't know where the text is over the image, so it gets the colours from the top left corner.

[Andrew Bone]

There is a slightly less hacky option in the works but, currently, it doesn't work with background-clip. It's called background-filter

webdesign.tutsplus.com/tutorials/c...

[Sarthak Sharma]

That’s cool

[Ken Bellows]

@link2twenty As I read your "why's it hacky" explanation, my thoughts were:

Nah, that's not hacky, that's brilliant.
Still not hacky.
Still loving it.
Grayscale? Such a cool idea.
And contrast to finish. Perfect. Why is any of this hacky?

"But it doesn't know where the text is over the image, so it gets the colours from the top left corner." -- Ahhhhh.... and that's where the hack hits the fan.

So close!