サムネイルをマウスオーバーした時に画像を拡大表示する方法

CSSの「transform:scale()」を使用することで、マウスオーバー時などで要素を拡大・縮小することが可能になります。
各コンテンツへのリンク用に設置するサムネイル画像などなどによく見られますが、マウスオーバーした際に、そのサムネイル画像を少し拡大させるなどの動きを付けることでクリックを誘導するのにいいかもしれません。

DEMO

【やり方】

サンプルとして3枚のサムネイル画像を縦に並べてみます。サイズは横幅360px,高さ240pxです。

HTMLを記述

<ul class="pan">
	<li><img src="images/pan1.jpg" width="100%"></li>
	<li><img src="images/pan2.jpg" width="100%"></li>
	<li><img src="images/pan3.jpg" width="100%"></li>
</ul>

</ul>

CSSを記述

.pan li {
	width:360px;
	height:240px;
	overflow:hidden;
	display:block;
	margin-bottom:10px;
}
.pan li img {
	-moz-transition: -moz-transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
	transition: transform 0.5s linear;
}
.pan li img:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	cursor:pointer;
}

.pan li {

width:360px;

height:240px;

overflow:hidden;

display:block;

margin-bottom:10px;

}

.pan li img {

-moz-transition: -moz-transform 0.5s linear;

-webkit-transition: -webkit-transform 0.5s linear;

-o-transition: -o-transform 0.5s linear;

-ms-transition: -ms-transform 0.5s linear;

transition: transform 0.5s linear;

}

.pan li img:hover {

-webkit-transform: scale(1.2);

-moz-transform: scale(1.2);

-o-transform: scale(1.2);

-ms-transform: scale(1.2);

transform: scale(1.2);

cursor:pointer;

}

「transition: transform 0.5s linear;」の「0.5s」で拡大・縮小に要する時間を設定します。この場合は0.5秒で拡大するということになります。

「transform: scale(1.2);」の「scale(1.2);」の部分で拡大率を指定しています。この場合は120%拡大するという指定になります。

※縮小する場合は「scale(0.8);」などのように1よりも小さい数値を指定することで縮小するという指定になります。