Hovering over text displays GIF behind

Hey all,

Building my own site and trying to do something fun in the header. I've attached a screenshot, where I've some background gifs, but I'd love for the gifs to only show up when the relevant word (the word infront of it) is hovered over. Currently I've got the text as as a text block, but I could also recreate the text as a HTML block if that would make a difference.

If anyone has an idea of how to make this happen, please give me a shout!

Website:

workbypage.squarespace.com

Pass:

workbypage

All the best,
Asa

Hi,

Do you use Personal or Business Plan?

If Personal, you can find a free code on Codepen, then share url, we can convert it to Squarespace Code Block

If Business Plan, we can try JS code to do this

Hey Tuan,

I'm using a business plan, yes!

I just took a look around codepen... it's probably something like this:

https://codepen.io/HeeneyOG/pen/PoJgmNz

Thanks for looking at this.

Asa