How to gradually reveal image on mouseover

What's an effective way to achieve what I've animated here: https://i.gyazo.com/44848ed96ae938ca4846d71c9985b675.mp4 for a website?

On mouseover, I want the cursor to gradually hide the upper layer image while revealing the lower layer. Ideally this transition would be permanent until a reload of the page.

Thanks in advance