Onmouseover change image transition

I have the following code snippet to change the src of an img tag when I hover over it.

<img src="./Path/to/image.png" alt="" class="exhibit-banner-img" onmouseover="this.src='./Path/to/newimage.png'" onmouseout="this.src='./Path/to/image.png'">

It runs as expected, but how do I add a transition time to the image when the event is fired?
Right now, it changes instantly.