Image reveal via mouse hover

Hello! I’m looking to do what I believe is a simple, interactive, before-and-after, image effect related to a mouse cursor.

Imagine there are two images stacked on top of one another (in my case a pre-edited image then a post edited image, the final). Upon mouse movement over the image, I want to user a crop effect of some sort to reveal/hide the top image over the bottom. This way when a user slides their mouse around the bottom image becomes visible and invisible.

Any clue on how this could be done?

Use onMouseIn and onMouseOut event handlers to hide/show the full image or the cropped image.