マウスホバーで画像を拡大・縮小・回転などの動きは、今ではよく見るマウスホバーエフェクトです。マウスホバーのエフェクトは、アイデア次第でかなりのパターンが作成できますね。ここでは基本的なパターンを示します。ちなみにマウスホバーとマウスオーバーは同じ意味です。

共通html

htmlでは、画像を表示させることしかやっていません。


	<div id="sample">
		<img src="./yasai.jpg" alt="野菜の写真" />
	</div>

共通CSS

CSSでは、画像のサイズとバックグランドの色を設定しています。imgでは、動作の時間とイージングを設定しています。


#sample {
	width:			300px;
	height:			200px;
	background-color:	#0a0;
}
#sample img {
	transition:		all 0.2s ease;
}

1.画像を縮小する

transform:scaleで、１より小さい値を設定することで縮小できます。

CSS


#sample1 img:hover {
	-webkit-transform:	scale(0.7);
	transform:		scale(0.7);
}
野菜の写真

2.画像を拡大するその１

transform:scaleで、１より大きな値を設定することで拡大できます。この場合は枠をはみ出してしまうので、画像に影をつけてみました。

CSS


#sample2 img:hover {
	-webkit-transform:	scale(1.5);
	transform:		scale(1.5);
	box-shadow:		1px 2px 3px #000;
}
野菜の写真

3.画像を拡大するその２

overflow:hiddenを設定して枠から出ないようにします。

CSS


#sample3 {
	overflow:		hidden;
}
#sample3 img:hover {
	-webkit-transform:	scale(1.5);
	transform:		scale(1.5);
}
野菜の写真

4.画像を横方向に拡大する

transform:scaleXで、X方向に拡大します。

CSS


#sample4 {
	overflow:		hidden;
}
#sample4 img:hover {
	-webkit-transform:	scaleX(1.5);
	transform:		scaleX(1.5);
}
野菜の写真

5.画像を縦方向に拡大する

transform:scaleYで、Y方向に拡大します。

CSS


#sample5 {
	overflow:		hidden;
}
#sample5 img:hover {
	-webkit-transform:	scaleY(1.5);
	transform:		scaleY(1.5);
}
野菜の写真

6.拡大＆４５度回転する

このブログでもアイキャッチ画像のエフェクトで使用しているパターンです。

CSS


#sample6 {
	overflow:		hidden;
}
#sample6 img {
	transform:		rotate(0) scale(1);
	-webkit-transform:	rotate(0) scale(1);
	transition:		all 0.2s ease;
}
#sample6 img:hover {
	transform:		rotate(45deg) scale(1.5);
	-webkit-transform:	rotate(45deg) scale(1.5);
}
野菜の写真

7.横に360度回転する

overflow:hiddenを設定して枠からはみ出ないようにしています。

CSS


#sample7 {
	overflow:		hidden;
}
#sample7 img:hover {
	-webkit-transform:	rotate(360deg);
	transform:		rotate(360deg);
}
#sample7 img {
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
野菜の写真

8.横に180度回転する

Y軸を中心に180度回転します。

CSS


#sample8:hover img {
	-webkit-transform:	rotateY(180deg);
	transform:		rotateY(180deg);
}
#sample8 img, #sample8:hover img {
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
野菜の写真

9.縦に180度回転する

X軸を中心に180度回転します。

CSS


#sample9:hover img {
	-webkit-transform:	rotateX(180deg);
	transform:		rotateX(180deg);
}
#sample9 img, #sample9:hover img {
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
野菜の写真