I'm looking for a similar solution like this: https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/ using Three.js for my project.

When I implemented the demo to my local environment and start modifying it, I got stuck where I wasn't able to add a background on the mouseover/hover parts, because somehow the Three.js objects are placed behind the background color.

Note that this does work whenever I change the body background color, but as soon as I try to add CSS background color to the underlying classes of the body the Three.js objects disappear behind it.

Applying z-index to the img classes did not work either.

Sorry, I'm still very new to this but got stuck on this topic and couldn't find a proper answer.

Hope someone can help me out here,

Thanks.