$(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); }); });
.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;}
<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>