jQueryのanimateを使用し、マウスオーバーで画像を縮小させマウスアウトで元のサイズに戻してみます。
1.使用する画像
2.CSSの記述例
以下は任意です
<style type="text/css"> <!-- .clGallery{ background-color:#FFFFFF; width:300px; height:300px; overflow:hidden; margin:10px auto; cursor:pointer; } .clTxt{ margin-left:10px; padding:3px; } h2{ font-size:14px; font-weight:normal; line-height:1.4em; } --> </style>
3.JavaScriptの記述例
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.clGallery').hover(function(){ $(this).find('img').animate({width:100, marginTop:10, marginLeft:10}, 200); },function(){ $(this).find('img').animate({width:300, marginTop:0, marginLeft:0},300); }); }); </script>
4.HTMLの記述例
<div class="clGallery"> <img src="i01.jpg" width="300" alt=""> <div class="clTxt"> <h2>隠れてたテキストです。</h2> </div> </div>
これを何に使うかまでは考えてませんが、多分何かには使える様な気がします。
※流用される場合は自己責任でお願いします。