マウス乗せると画像の下から文字出るやつ

HTML

<div class="container">

  
  <div class="gallery">
      <img src="http://kachibito.net/wp-content/uploads/2012/01/sample01.jpg">
      <div class="inf">  
          <h2>List01</h2>
          <p>
              List01 List01 List01 List01 List01 List01
          </p>
      </div>
    </div>
 
  <div class="gallery">
      <img src="http://kachibito.net/wp-content/uploads/2012/01/sample01.jpg">
      <div class="inf">  
          <h2>List02</h2>
          <p>
              List02 List02 List02 List02 List02 List02
          </p>
      </div>
      </div>
   
  <div class="gallery">
      <img src="http://kachibito.net/wp-content/uploads/2012/01/sample01.jpg">
      <div class="inf">  
          <h2>List03</h2>
          <p>
             List03 List03 List03 List03 List03 List03
          </p>
      </div>
      </div>
  
  <div class="gallery">
      <img src="http://kachibito.net/wp-content/uploads/2012/01/sample01.jpg">
      <div class="inf">  
          <h2>List04</h2>
          <p>
              List04 List04 List04 List04 List04 List04 
          </p>
      </div>
      </div>
  
  <div class="gallery">
      <img src="http://kachibito.net/wp-content/uploads/2012/01/sample01.jpg">
      <div class="inf">  
          <h2>List05</h2>
          <p>
              List05 List05 List05 List05 List05
          </p>
      </div>
      </div>
 
  <div class="gallery">
      <img src="http://kachibito.net/wp-content/uploads/2012/01/sample01.jpg">
      <div class="inf">  
          <h2>List06</h2>
          <p>
              List06 List06 List06 List06 List06
          </p>
      </div>
      </div>

          
      
  </div>

CSS

.container {
    width: auto;
}
.gallery { 
    background-color:#eee; 
    width:200px; 
    height:150px; 
    overflow:hidden; 
    margin:5px; float:left;
}
.info    { 
    margin-left:10px; 
    padding:3px;}

.inf h2,
.inf p { 
    color:#666;
}
.clear { 
    clear:both; 
    margin-top:10px;
}

JavaScript

$(document).ready(function(){
    $('.gallery')
    .hover(
      function(){
        $(this).find('img').animate({width:200, marginTop:0, marginLeft:0},300);
         },
       
     function(){
        $(this).find('img').animate({width:60, marginTop:10, marginLeft:10}, 200);
          }

    );
});