unable to get child element to fadein when hovering over parent element

unable to get child element to fadein when hovering over parent element

I am new to JQuery and am currently attempting to get a child element to
fade in to display product information when the user hovers over the
parent element.
this is as far as I've got with out luck:
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 a simplified JSFiddle of what I have so far.
Why isn't the child element fading in when I hover over the parent element?
Thanks