DEV Community

loading...

Discussion on: How to make Dynamic Text Overlays on Images

Collapse
link2twenty profile image
Andrew Bone

There are hacky CSS ways to do this, though I'd never suggest using them.

Collapse
shayd16 profile image
Shayne Darren

I'm really not familiar with CSS, what exactly is hacky about it?

Collapse
link2twenty profile image
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.

Thread Thread
link2twenty profile image
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

example

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

Thread Thread
sarthology profile image
Sarthak Sharma Author

That’s cool

Thread Thread
kenbellows profile image
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!