Image replacing Image on hover

https://preview.webflow.com/preview/pinnacle-view-a6d09b?utm_medium=preview_link&utm_source=designer&utm_content=pinnacle-view-a6d09b&preview=f01c6e1b13cb375e32d31b3517c7277d&mode=preview

Hi all, I’m trying to figure out the best way to replace an image when you hover over another image.
The ideal scenario is for the user to see a less-detailed view of a site plan when landing on the ‘Developments’ page and when they hover over it, an image of a detailed view of the site plan kind of “replaces” the first compact view, but wow I’ve never struggled so much with placement.
Is there an easy way to implement this?
I’ve read online with the different solutions people offer but I seem to run into unusual problems.

If you go to that screen, and you hover over that open space, you’ll see the detailed view appear.
I’ve left it like that for now. Basically, I’m just trying to understand how to put two photos, same sized, on top of each other exactly.
Thanks in advance.