Jquery On Hover: Fade background with text overlay

I am trying to create a rollover effect that fades the image to 20% opacity and also overlaying text on top of the div. I 开发者_如何学JAVAhave been able to make it fade, and reveal the text but for some reason it doesn't work well when they are combined. The closest thing that I have found to what I am trying to do is this: http://damiencorrell.com/ except for I am trying to get the background to fade to 20%. Thanks for all of the help!

try something like this:

// change yourimage for your "#imageid" or ".imageclass"
$('yourimage').hover(function(){
  // fade to 0.2 ( 20% ) in 300ms
  $(this).fadeTo(300, 0.2);
}, function(){
  // restore opacity to 1 im 300ms
  $(this).fadeTo(300, 1);
});