jQuery Fade on Hover Not Working

Question

I'm trying to make an image have a white overlay on mouse hover. It seems to work on jsfiddle http://jsfiddle.net/EqH4H/, but not on my local website. The image just stays the same not does not fade.

This is my HTML code;

<div id="masonry_container" >

<div class="masonry_item">
<a href="http://storyville.jonmarkoff.com/storyvillewp"target="_blank">
<img src="images/storyville_home.png" alt="Storyville Entertainment"/>
<h3>Storyville Entertainment</h3>
<p>Development. jQuery hover effects.</p>
</a>
</div><!--masonry_item-->

</div>

CSS;

#masonry_container {
margin:0 auto 50px auto;
width:100%;
position:relative;
z-index:2001;
}

.masonry_item {
width:300px;
padding:20px;
}

.masonry_item:hover{ 
outline:1px solid white;
}

#masonry_container img {
width:100%;
background:white;
}

JS;

$(document).ready(function(){
$("#masonry_container img").hover(
function(){
    $(this).fadeTo(500, 0.5);
},
function(){
    $(this).fadeTo(500, 1);
});
});

I'd appreciate your help.