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

Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.32-2/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7