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

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

伸縮させる画像

伸縮させる画像の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のanimate()を使って、class=”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記述

※伸縮表示する画像を表示します。必要に応じて変更して下さい。

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


<div class="clTxt">


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


</div>


</div>

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

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

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