マウスオーバー・アウトで画像サイズを伸縮表示して見る

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>

マウスオーバー・アウトで画像サイズを伸縮表示でも

これを何に使うかまでは考えてませんが、多分何かには使える様な気がします。
※流用される場合は自己責任でお願いします。