How to gradually reveal image on mouseover

What's an effective way to achieve what I've animated here: 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