Image hover delay

I'm trying to create a hover effect like this: one image will be displayed, and when you hover there will be a different image, and it goes back to the original image on mouse out.

I figured out a way to switch the images using Markdown (eg below, minus brackets)

img src="https://static1.squarespace.com/static/5c4176385ffd20a4ddf6fb6b/t/5d1f8e31f92b0b0001548095/1562349114073/5D3B0141.jpg" onmouseover="this.src='https://static1.squarespace.com/static/5c4176385ffd20a4ddf6fb6b/t/5d1f8e41f92b0b0001548148/1562349129885/5D3B0142.jpg'" onmouseout="this.src='https://static1.squarespace.com/static/5c4176385ffd20a4ddf6fb6b/t/5d1f8e31f92b0b0001548095/1562349114073/5D3B0141.jpg'"

but I want the images to quickly fade into the other instead of jarringly swapping. I think it's possible to do the fade part using CSS, but I'm using js for the other part. How can I do both of these things using the same language?