Streaming live at 10am (PST)

Changing font colour when text moves over an img/div block


I’m wanting to recreate the effect at the top of this Wordpress theme where the text changes colour as is translates over an image:

Anyone have some ideas?


Looking at the code of that it should be possible. Might take a bit of work.

Essentially it is is two text blocks stacked on top. The white ones are inside a div with overflow hidden.

Then you could use some interactions to shift the text back and forth on scroll


@PixelGeek did a tutorial on a very similar effect that you can check out below:


Hey, thanks for that! You’re right, it is actually quite simple :+1:

Thanks for the help :slight_smile: