jQuery - black & white image to color image (hover)

I have black and white image contained in a css:

In the same file I put in color image:

Now I wants to when you hover the mouse on this image has changed from black and white to color...

I put the function in jQuery:

    $("ul li").mouseover(function() {

        $(this).find("span.thumb").hover().css({
            'background-position': 'center bottom'
        }).stop().fadeTo(400, 0).show();

    });

    $("ul li").mouseout(function() {

        $(this).find("span.thumb").hover().css({
            'background-position': 'center top'
        }).stop().fadeTo(400, 1).show();

    });

HTML:

<span class="thumb"></span>

CSS:

ul li span.thumb {background:url(image.png) no-repeat}

Q: How I can do it differently? (that when you hover the mouse on the image did not disappear).

Solution

Hi looks to me that you've over complicated it slightly, try this:

HTML

<div>
  <img src="http://ajthomas.co.uk/flower-col.png" alt="" />
</div>

JQUERY

$(document).ready(function() {
    $('div').mouseover(function(){
        $('img').fadeIn('slow');
    });
    $('img').mouseout(function(){
        $('img').fadeOut('slow');
    });
});

CSS

div{width:300px;
    height:300px;
    background-image:url(http://ajthomas.co.uk/flower-gs.png)}

img{display:none;}

I've coded it up for you too on JSFiddle