マウスオーバーで画像を拡大・縮小表示 scale()

サイト内のサムネイル画像などに動きを持たせたい時の一例として、マウスオーバーで画像を拡大ズームや縮小表示を、CSSのtransformプロパティのscale値で指定することができます。

▼サンプルを見ながら確認していきましょう。
横300px,高さ200pxのサムネイルを配置したとします。

【サンプル1】マウスオーバーで(×1.2)に拡大
【サンプル1】マウスオーバーで(×0.8)に縮小

<div class="expand"><img src="images/eu1.jpg" /></div>
<div class="reduce"><img src="images/eu2.jpg" /></div>

1 2	<div class="expand"><img src="images/eu1.jpg" /></div> <div class="reduce"><img src="images/eu2.jpg" /></div>

それぞれのimg要素をdivで囲んでいます。

img {
	-webkit-transition: all 1s;
	transition: all 1s;
}
.expand img:hover{
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
.reduce img:hover{
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
}

img {

-webkit-transition: all 1s;

transition: all 1s;

}

.expand img:hover{

-webkit-transform: scale(1.2);

transform: scale(1.2);

}

.reduce img:hover{

-webkit-transform: scale(0.8);

transform: scale(0.8);

}

img要素のtransitionに1sと指定し、変化する時間の長さを1秒に指定。
img:hover要素にtransform: scale(数値);を指定し、scale()内の数値で拡大・縮小を設定します。

※IE8以下は非対応です。