Q:

simple and effective way to fade in hover

I need help making an image fade into another image when i hover over. I want a transition fade when you hover over the image. 
I've tried several different ways already but they do not seem to work how i want.
The social icons on the bottom of the page are the ones i want to create a fade transition 
jquery/javascript/css whatever it takes.
thanks. so what do i need to do?
http://trulyamped.com/test/index.html

A:

Check out [this fiddle] (http://jsfiddle.net/Xm2Be/13/) 
from Using fade in/fade out with jquery.
It should do what you need...
Html code:
<div class="fader">
<img class="something" src="http://placehold.it/300x300/000fff" />
<img class="something" src="http://placehold.it/300x300/fff000" />
</div>

JS:
window.onload=function(){
    $('.fader').hover(function() {
        $(this).find(".something").stop(true, true).fadeToggle();
    });
};

CSS:
.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0; 
left: 0;
display: none;
}

Don't forget to add to the head 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
If you want it to be slower add a number inside .fadeToggle(600);

