Change image on text hover

Hi fellow Sqaurespacers!

I'm creating a Image Gallery for a client of mine, and I have run into a bit of a pickle. 

I am wanting to change images when hovering over text, like exactly like on this website: https://www.ocun.com/product/category/professional

If you have a look at the Thor harness one, you can see how it changes the image and text color when hovering over "4Q", "2Q" and "0Q".

Now, how do I do this in Squarespace? I have been at this problem for the last 2 hours probably and I'm beyond stuck. I have tried some javascript, but then the question comes in where do I put the Javascript, in the code block, on the page heading or the whole website heading? 

Anyways, I hope someone please can help, cause if I would be able to fix this on the website then I would be beyond grateful and happy about it. 

Cheers