画像がアニメーションエフェクトで拡大/縮小し、テキストを表示

Result

jQuery

$(document).ready(function(){
    $('.gallery').hover(function(){
       //マウスホバー時に画像を探してアニメーション。通常は変数宣言する
        $(this).find('img').animate({width:60, marginTop:10, marginLeft:10}, 200);
          },function(){
        $(this).find('img').animate({width:200, marginTop:0, marginLeft:0},300);
         });
});

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

html

<div class="container">
  <div class="gallery">
      <img src="01.jpg">
      <div class="inf">  
          <h2>List01</h2>
          <p>List01 List01 List01 List01 List01 List01</p>
      </div>
    </div>
 
  <div class="gallery">
      <img src="02.jpg">
      <div class="inf">  
          <h2>List02</h2>
          <p>List02 List02 List02 List02 List02 List02</p>
      </div>
      </div>
</div>

via

Zoom-Info – How To Create An Informative Image Gallery With jQuery & CSS