How to create an image hover fade effect with jQuery and CSS?

Question

I am trying to create a logo hover effect by fading in and out two images. I tried using CSS, but the results did not look as good as expected (even though it works perfectly for other purposes), so I decided to try jQuery as well. (Ignore the tags, they're for blogger).

This was my first approach (which looked good when it came to fading, but 'display: none' was not properly becoming 'display: block' when hovering on it the first time, so the image moved from its initial position. Then it goes back to that position and when hovering it works perfectly.

<script type='text/javascript'>
//<![CDATA[
$(function() {
$('#MyLogoContainer').hover(function() {
    $('#MyLogoHover').fadeIn('slow');
    $('#MyLogo').fadeOut('slow');  
}, function() { 
    $('#MyLogo').fadeIn('slow'); 
    $('#MyLogoHover').fadeOut('slow');   
});
});
//]]>
</script>

My second approach solved the CSS position issue, but the animation doesn't look fluid at all and both images disappear almost completely at some point, which doesn't look good and didn't happen with my fist approach.

<script type='text/javascript'>
//<![CDATA[
$(function() {
$('#MyLogoContainer').hover(function() {
    $('#MyLogoHover').fadeIn('slow').css('display','block');
    $('#MyLogo').fadeOut('slow').css('display','none');  
}, function() { 
    $('#MyLogo').fadeIn('slow').css('display','block'); 
    $('#MyLogoHover').fadeOut('slow').css('display','none');   
});
});
//]]>
</script>

The problem's got to be in the CSS. Somehow, I have to find a way so the display property doesn't play a crucial role in positioning any of these two SVG images, so I can use the first jQuery code without any change occurring to my SVG images' position.

#MyLogoContainer {
    width: 100%;
    left: 50%;
    margin: 0 0 0 -350px;
    position: absolute;
}
#MyLogo {
    width: 700px;
    display: block;
    position: absolute;
}

#MyLogoHover {
    width: 700px;
    display: none;
    position: absolute;
}

Answer 1

From what you've described you might not even need JS to do this:

 .container { position: relative; display: inline-block; box-sizing: border-box; border: 1px solid black; cursor: pointer; overflow: hidden; background: #ccc; height: 150px; width: 150px; } .container:hover .logo--static-state { opacity: 0; } .container:hover .logo--hover-state { opacity: 1; } .logo { position: absolute; transition: opacity 300ms ease-in-out; } .logo--static-state { z-index: 9999; } .logo--hover-state { opacity: 0; z-index: 9998; } 

 <div class="container"> <img class="logo logo--static-state" src="http://placehold.it/150x150?text=Static" height=150 width=150> <img class="logo logo--hover-state" src="http://placehold.it/150x150?text=Hovered" height=150 width=150> </div>