jquery - 親要素にカーソルを合わせると、子要素をフェードインできません

Question

私はJQueryが初めてで、現在、ユーザーが親要素の上にカーソルを置いたときに、子要素をフェードインして製品情報を表示しようとしています。

これは私が運が悪かった限りです：

jQuery:

$('.overlay-wrap').hover(function(){

    $('.product-overlay', this).fadeIn(2000, "swing");

    },

    $('.product-overlay', this).fadeOut("fast");

});

HTML:

<div class="overlay-wrap">
            <div class="product-overlay"><a href="#">Name of the product</a></div>
    </div>

CSS:

.overlay-wrap{
    position:relative;
    border:1px solid red;
    width:200px;
    height:200px;
}
    .product-overlay{
        position:absolute;
        bottom:0px;
        left:0px;
        background:#000;
        opacity:0.5;
        padding:5px;
        width:100%;
        display:none;
    }
    .product-overlay a{
        font-size:12px;
        line-height:20px;
    }

Heres は、私がこれまでに持っているものを単純化したJSFiddleです。

親要素の上にカーソルを置いたときに子要素がフェードインしないのはなぜですか?