I'm using Wordpress and Woocommerce. I needed a thing which would display the secondary product image as the user hovers on the main one in the shop page. I found an exceptionally good plugin crafted by jameskoster, and I've modified it to my needs. It does what it intends to do, however, I've a glitch which I cannot resolve.

The secondary div is placed below the main one in my actual setup. When the hover happens, everything fine. When the hover vanishes or when I hover over the li element, instead of the a, those things happen:
<https://imgur.com/a/mbZGd>

The error is that the secondary image falls below the original div as soon as the hover ends, revealing it and making the transition look bad.

I've past almost the whole yesterday's afternoon trying to fix it. I've tried a lot of things, including height:0; display:none; opacity:0, element positions and several other things, even conditional selectors "~"

However, I can't make it work.
The solution that I need is to make the two divs fit the same spot.
When I hover the actual one, it vanishes and the second appears.

The idea is pretty straightforward. Can you guys help me achieve it?