How to make animation on the site so that when hovering with the mouse, part of the image changes (like a hole in the wall)?

Question

css

The task is this: there is an isometric house like this:
https://cdn2.vectorstock.com/images/1000x1000/41/9...
With a roof, walls, in svg format.
It is necessary that when the user points at a part of the building, in this part (like x-ray) the walls are removed and another picture with the interior is visible. And there are several such spots. And the main thing is that this should be an animation, and not just a hover On / Off
Please explain the approximate process, I drew a house in a chandelier, exported it to svg. Now I want to finish off the frontend part. Are there programs that allow this? I know there is a spy program, it's purely svg-animation, but I need the hover to be from the user... Should I do with html5 or do I need a javascript? Are there any tutorials on the topic? Sites with a similar implementation?
2 Question: If you have a "Remove Walls" button: then when you click on the button, the animation will play. Does anyone know of such an example?
Thanks a lot!

Answer 1

Need a script to track the mouse. And two pictures. If I understood the idea correctly, then something like this would do .

Answer 2

Tyk
I don’t know how with svg, but with the help of regular html you can split the picture into parts and set your own hover for each part.