Show message description fades on hover

Question

Now I have the following code:

$(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>

This works well, but I would like the thumbnail to fade slightly with a black background, so the thumbnail is still slightly displayed. Right now, the background is just showing white when I hung over it. How can i do this? Also, is there a better way to write code, possibly using something other than mouseenter? I'm still new to jQuery, so everything is new to me.

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

Answer 1

- edited to tidy up ---

Demo version of the final code on

: http://jsfiddle.net/thewebdes/LDs6C/

: 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);
});

, , , , , . , , cursor: pointer .description p, , .

Answer 2

: 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);
  });
});

​​ . css, :

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

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