Easy? Hover effects for images created in a page

Hi I am a relative Newbie to this, and enjoying creating effects on my webpage in twentytwelve.

I have added an image through the text editor section of the page like:

<img src="https://MY IMAGE.jpg" alt="" />
</div>

and I would like to make it fade, show text and be a link.

I tried code like below in the text section of the page, but it didn’t work:
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

I also added code to the child theme CSS. However it only made my header image fade, which I didn’t want.

I really hope this does not involve making a child php file as every single time I did that the screen went white and I got black text along the top. I was wondering if there is a way to do this in the text editor of the page; – or if you think it is easy, exactly how to make a child php file that won’t ruin everything.

Thanks muchly for your help!