create a fadeout effect on div

im having trouble with creating this.

Im开发者_如何学Python using jQuery as my main JS library. I wanted to use the fade() function to create a div, which when rolled-over would fade to show content underneath.

Say for instance a div with grey background with an image on top, which would fade to reveal content underneath. Is this possible? Im not very good with JS/jQuery

Something like this http://jsfiddle.net/dkpgQ/2/ ?

EDIT: code...

HTML

<div id="container">
    <div id="content">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
    </div>
    <div id="overlay">
    </div>
</div>

Javascript

$("#overlay").mouseover(function() {
   $("#overlay").fadeOut("slow"); 
});

CSS

#container {
    position:relative;
    width:200px;
}

#overlay {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:grey;
}

You can use jquery

$('#book').fadeOut('slow', function() {
   // Animation complete.
});

This link contains more explanation.

Or you can use the jquery animate function as explained in this link