Hover images overlap with other images

I am creating hover effect for one section of my landing page and I am facing a problem with hover effect, need help.

I have use 4 images for this effects (3 product images and 1 main image)
I need main image when someone land on the page, and when someone hover on the product name then “main image” should replace with that product specific image. And same thing I need with my 3 product images. Hover effect is working well but my problem is when we load page all 4 images overlap with each other (I need only main image here when someone visit this page)

Here is my public share link: LINK
(how to access public share link)