How to make a part of the image show through on hover in JS?

Question

css

You need to take two pictures, place one of them under the other, how to do this is clear, position: absolute and z-index, but the main task is that when hovering with the mouse or when clicking on some part of this picture (square, circle, triangle, it doesn't matter) this part, for example 64x64 in size, was translucent and the picture with a smaller z-index was visible.
How to do this does not occur at all, I assume that you need to use canvas, but still I have no idea in which direction to dig.

Answer 1

This can be done using the css property clip-path
Works differently in chrome and firefox
Here you can generate an svg mask, and at the same time look inside
cssplant.com/clip-path-generator

Answer 2

There are many options.
If you need guidance, then you can get rid of css alone.
If the event is clicked, then you can hang up the handler on JS, which will manage the classes.
I can't send the code because I'm writing from my phone)

Answer 3

For the picture that should shine through itself, set the opacity property and that's it. If CSS, then img: hover {opacity: from 0 to 1}.