showing post description fading in on hover
<p>Right now I have the following code set up:</p>

<pre><code>$(function() {
    $('.thumbnail').mouseenter(function() {
        $('.thumbnail').fadeOut(200, function() {
            $('.description').fadeIn(200);
        });
    });
    $('.description').mouseleave(function() {
        $('.description').fadeOut(200, function() {
            $('.thumbnail').fadeIn(200);
        });
    });
});
</code></pre>

<p>With this html:</p>

<pre><code>&lt;div class="thumbnail"&gt;
    &lt;img src="image.jpg" /&gt;
&lt;/div&gt;
&lt;div class="description"&gt;
    &lt;p&gt;content here&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>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.</p>

<p>Something like this would be ideal: <a href="http://www.brandingdirection.co.uk/" rel="nofollow">http://www.brandingdirection.co.uk/</a> </p>
