showing post description fading in on hover

Right now I have the following code set up:

$(function() {
    $('.thumbnail').mouseenter(function() {
        $('.thumbnail').fadeOut(200, function() {
            $('.description').fadeIn(200);
        });
    });
    $('.description').mouseleave(function() {
        $('.description').fadeOut(200, function() {
            $('.thumbnail').fadeIn(200);
        });
    });
});

With this html:

<div class="thumbnail">
    <img src="image.jpg" />
</div>
<div class="description">
    <p>content here</p>
</div>

It works good but I'd like the thumbnail to fade slightly with a black background so the thumbnail image still shows slightly. Right now, the background just shows white when I hover over it. How can I go about doing this? Also, is there a better way to write the code, perhaps using something other than mouseenter? I'm still a beginner with jQuery so it's all new to me.

Something like this would be ideal: http://www.brandingdirection.co.uk/

-- edited to tidy up ---

Final code demo at

Text link version: http://jsfiddle.net/thewebdes/LDs6C/

Image link version: http://jsfiddle.net/thewebdes/jY2e2/1/

HTML

<div class="thumbnail">
    <img src="http://chuvachienes.com/wp-content/uploads/2009/07/hello.jpg" width="200"/>

    <div class="description">
        <p>content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here</p>
    </div>
</div>

CSS

.thumbnail { background: #000; width: 200px; height: 200px; overflow: hidden; }
.description { display: none; position: relative; top: -190px; left: 10px; color: #FFF; font-weight: bold; }

JS

$('.thumbnail').hover(function() {
    $('.thumbnail img').stop(true,true).fadeTo(400, 0.2);
    $('.description').stop(true,true).fadeIn(400);
}, function() {
    $('.thumbnail img').stop(true,true).fadeTo(400, 1);
    $('.description').stop(true,true).fadeOut(400);
});

To make links, either link the pieces of text you want to link from or if you want the whole block to link, link the image. If linking the whole block, to avoid confusion you should add cursor: pointer to your .description p as otherwise you'll just get the text select cursor instead while you're hovering over the text.

How about this: http://jsfiddle.net/UCy4T/2/

$(function() {

  var animationspeed = 500;

  $('.thumbnail').mouseenter(function() {
    $('.thumbnail').fadeOut(animationspeed);
    $('.description').fadeIn(animationspeed);
  });
  $('.description').mouseleave(function() {
    $('.description').fadeOut(animationspeed);
    $('.thumbnail').fadeIn(animationspeed);
  });
});

Added a variable for your animation speed. also you need to change your css to set the elements to the same position and dimensions:

.description {
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
}

.thumbnail {
  position: absolute;
  left: 0;
  top: 0;
}