Jquery help

Hello,

I'm totally new to Javascript and I'm trying to break into learning through using the Jquery library. This is the problem I'm having:

What I want to do is recreate a roll over effect I saw here:

http://www.formfiftyfive.com/


So there are 4 of these in a list.

html:

<div class="content">
<img src="../web-app/images/article-4.jpg" alt="" />
<div class="overlay">
<h1>Title of article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<a href="#">More info</a>
</div>
</div>


Here is my jquery

$(document).ready (function() {
$('.overlay').hide();
$('.content').hover( function() {
$('.overlay').show('fast');
}, function() {
$('.overlay').hide('fast');
});
});

This does hide and show the overlay div on hover but its doing it to all 4 content blocks and not just the one thats being hovered over at that time.

Can anyone help with this?

Andy