Display second image on hover

I used the following CSS code to display a second image on hover. I have three interrelated questions:

1. How do I get the transition to be less abrupt? More of a fade in and out?

2. How do I get a banner with the caption to appear like I would with the native "caption overlay on hover?"

3. How do I get the image to fade into view when scrolled past / fade out when the user scrolls beyond it?

Thanks to any help that can be provided. 

Hi. Which CSS code?

Sorry, realized I forgot to insert the code:

1 hour ago, Cryptcocrew said:

Sorry, realized I forgot to insert the code:

 

<img src="First Image" onmouseover="this.src='Second Image'" onmouseout="this.src='First Image'">

 

You can consider using this guide with Image Block. I faced a same question yesterday.

What difference does this make from the code that I used? Does it address questions (2) and (3)

It solves #1.

With #2. You need to share link to your site, we can check easier

With #3. I have no idea.