title: hover over and each
body: <p>I want the user to hover over a a link which has a class called picture and the span to animate (increase the padding top), here is the code I have made so far but when the user hovers over it, it animates them all, i only want it to animate the one the user has hovered over.</p>
  
  <pre><code>$('.picture').each(function(){
      $('.picture').hover(function(){
          $('.picture span').animate({
              'padding-top' : '20px'
          },'fast');
      });
  
      $('.picture').mouseout(function(){
          $('.picture span').animate({
              'padding-top' : '10px'
          },'fast');
      });
  });
  </code></pre>
  
  <p>Any help would be appreciated I think its somewhere on the each function Im going wrong but am unsure. A link to it can be found here: <a href="http://bathroomsyork.co.uk/" rel="nofollow">http://bathroomsyork.co.uk/</a></p>