Hover image swap with delay

Hover image swap with delay

I am a non-programming guy, old in IT but new to the JQuery and looking for a solution and help.
Here is my problem:
I am showing an image possibly 957x30 pixels size on a page.
Whenever there is a mouseover or hover on this image, it is swapped with another image (say 957x130 pixels) by expanding its division in slidedown fashion and stays visible for few seconds before swapping back with first image.

Can you guide me in right direction how to perform this. I am unable to find any solution that solves it.

I will be grateful to you if you can help me to solve this issue.

Thanks and best regards,
Rakesh