jQuery mouseover mouseout event on a <span> when hover over a div

I am trying to make a title appear and disappear over a thumbnail. This is my title span:

<span class="thumbtitle"><?php the_title(); ?></span>

This is inside an <li> tag with a class of "thumb".

The jQuery i am using is:

<script type='text/javascript'>
$(document).ready(function() {
  //settings
  var opacity = 0, toOpacity = 1, duration = 0;
  //set opacity ASAP and events
  $('.thumbtitle').css('opacity',opacity).hover(function() {
      $(this).fadeTo(duration,toOpacity);
    }, function() {
      $(this).fadeTo(duration,opacity);
    }
  );
});
</script>

Now this works perfectly, but it works when i hover over the title... i would like it to trigger when i hover over the thumbnail rather than where the title is positioned, so that when the mouse goes over the thumbnail (anywhere on it) the title appears.

Can someone help me do this? Also, can i give it an animation effect.. so that it gradually appears and disappears, rather than just instantly appear and disappear?

Miro

here is the updated one :-

<script type='text/javascript'>
   $(document).ready(function() {
   //settings
   var opacity = 0, toOpacity = 1, duration = 0;
   //set opacity ASAP and events
   $('li.thumb').hover(function() {
      $(this).children('.thumbtitle').fadeTo(duration,toOpacity);
    }, function() {
      $(this).children('.thumbtitle').fadeTo(duration,opacity);
    }
  );
});
</script>