マウスオーバー・マウスアウトで画像サイズを伸縮する方法【animate】

jQueryのanimate()を使ってマウスオーバー・マウスアウトで画像を縮小させマウスアウトで元のサイズに戻します。

伸縮させる画像

伸縮させる画像エリア（.clGallery）の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>

jQueryのanimate()を使って画像伸縮させるJavaScript記述

※jquery.min.js（1.8系）ファイルを読み込みます。jQueryのanimate()を使って、画像エリア（.clGallery）内のimg画像をマウスオーバー時にwidthを100pxに縮小し、マウスアウトで300pxにしてます。

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

伸縮表示する画像のHTML記述

※伸縮表示する画像（class=”clGallery”内のimgタグ）を表示します。必要に応じて変更して下さい。

<div class="clGallery">
		<img src="i01.jpg" width="300" alt="">


<div class="clTxt">


<h2>隠れてたテキストです。</h2>


</div>


</div>

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

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

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。