【CSS】マウスオーバーで画像を拡大縮小回転させる

どうも、ジャングルオーシャンのミケです。

今日はマウスオーバーすると画像が拡大、縮小、回転をするエフェクトの紹介だよ。

HTMLとCSSだけで簡単に実装できるよ。

ソースコードを載せてるからぜひコピペして使ってね。

こちらのソースコードはPCサイト向けのものになります。ご了承ください。

拡大、縮小、回転に使用するCSSプロパティ

拡大、縮小、回転に使うのは

CSSのtransformというプロパティだよ。

サンプルデモページも用意したから

具体的なイメージはここでつかみながら色々試してみてね。

サンプルデモを見る

それじゃ拡大、縮小、回転させる時のソースコードを紹介していくよ。

1.マウスオーバーで画像を拡大する

HTML

CSS

.moimg1 {
	overflow: hidden;
	width: 350px;
	height: 240px;
}
.moimg1 img {
        width: 350px;
	display: block;
	transition: 0.5s;
}
.moimg1 img:hover {
	transform: scale(1.1, 1.1);
}

サンプルデモを見る

imgタグを囲んでいるdivタグの大きさをwidthとheightで固定してoverflow:hidden;で拡大した分は非表示になるようにしているよ。
マウスオーバー時の動きはimgに:hoverという擬似クラスをつけてその中にプロパティを入れることで指定できるよ。
この時のプロパティがtransformで値のscaleの括弧の中に縦と横の比率をどれくらい大きくするかを記述できるんだ。この場合は、縦も横も1.1倍になっているよ。

2.マウスオーバーで画像を超拡大する

HTML

CSS

.moimg2 {
	overflow: hidden;
	width: 350px;
	height: 240px;
}
.moimg2 img {
        width: 350px;
	display: block;
	transition: 0.5s;
}
.moimg2 img:hover {
	transform: scale(2.0, 2.0);
}

サンプルデモを見る

一つ目のマウスオーバー時に拡大するtransformの値は1.1倍だったけどここの値をさっきより大きくするとさらに画像を拡大させることができるよ。

3.マウスオーバーで画像の縦だけを拡大する

HTML

CSS

.moimg3 {
	overflow: hidden;
	width: 350px;
	height: 240px;
}
.moimg3 img {
        width: 350px;
	display: block;
	transition: 0.5s;
}
.moimg3 img:hover {
	transform: scale(1.0, 2.0);
}

サンプルデモを見る

transformプロパティの値のscaleの括弧の中に書く数字は、(横,縦)の倍率になるから、この場合は縦だけがすごく拡大されるよ。

4.マウスオーバーで画像の横だけを拡大する

HTML

CSS

.moimg4 {
	overflow: hidden;
	width: 350px;
	height: 240px;
}
.moimg4 img {
        width: 350px;
	display: block;
	transition: 0.5s;
}
.moimg4 img:hover {
	transform: scale(2.0, 1.0);
}

サンプルデモを見る

transformプロパティの値のscaleの括弧の中に書く数字は、(横,縦)の倍率になるから、この場合は横だけがすごく拡大されるよ。

5.マウスオーバーで画像を縮小する

HTML

CSS

.moimg5 {
	width: 350px;
	height: 240px;
}
.moimg5 img {
        width: 350px;
	display: block;
	transition: 0.5s;
}
.moimg5 img:hover {
	transform: scale(0.9, 0.9);
}

サンプルデモを見る

拡大した時と同じように、transformプロパティの中のscaleを0.9にしているから画像が縮小されているよ。縮小の時はimgタグを囲んでいるdivタグのoverflow:hidden;は消しているよ。

6.マウスオーバーで画像を超縮小する

HTML

CSS

.moimg6 {
	width: 350px;
	height: 240px;
}
.moimg6 img {
        width: 350px;
	display: block;
	transition: 0.5s;
}
.moimg6 img:hover {
	transform: scale(0.2, 0.2);
}

サンプルデモを見る

transformプロパティのscaleを0.2にしているからすごく縮小されるよ。

7.マウスオーバーで画像の縦だけ縮小する

HTML

CSS

.moimg7 {
	overflow: hidden;
	width: 350px;
	height: 240px;
}
.moimg7 img {
        width: 350px;
	display: block;
	transition: 0.5s;
}
.moimg7 img:hover {
	transform: scale(1.0, 0.2);

}

サンプルデモを見る

拡大した時と同じようjにtransformプロパティのscaleが（横,縦）の大きさを変更するようになっているから今回は縦が0.2倍される。つまり縦だけがすごく小さくなるよ。

8.マウスオーバーで画像の横だけ縮小する

HTML

CSS

.moimg8 {
	overflow: hidden;
	width: 350px;
	height: 240px;
}
.moimg8 img {
        width: 350px;
	display: block;
	transition: 0.5s;
}
.moimg8 img:hover {
	transform: scale(0.2, 1.0);
}

サンプルデモを見る

transformプロパティのscaleの数字が横を縮小するように設定しているから横だけ縮小されるよ。

9.マウスオーバーで画像をZ軸回転する

HTML

CSS

.moimg9 {
    width: 100%;
    height: 240px;
    line-height: 100px;
    text-align: center;
}
.moimg9 img{
    width: 350px;
    transition: 1.0s;
    transform: rotateZ( 0deg );
}
.moimg9:hover img {
    transform: rotateZ( 360deg );
}

サンプルデモを見る

画像を回転させる時は同じtransformプロパティでrotateという値を使うよ。今回はZ軸をもとに回転させたいからrotateZを使っているよ。数字のあとについているdegは英語で度を意味するdegreeの省略だよ。

10.マウスオーバーで画像をZ軸回転して逆さにする

HTML

CSS

.moimg10 {
    width: 100%;
    height: 240px;
    line-height: 100px;
    text-align: center;
}
.moimg10 img {
    width: 350px;
    transition: 1.0s;
    transform: rotateZ( 0deg );
}
.moimg10:hover img {
    transform: rotateZ( 180deg );
}

サンプルデモを見る

さっきZ軸をもとに回転させた時に:hoverの時のtransformプロパティのrotateZの数字を360degにしていたけど、今回はここを180degにしているから180度回転して逆さになるようになっているよ。

11.マウスオーバーで画像をX軸回転する

HTML

CSS

.moimg11 {
    width: 100%;
    height: 240px;
    line-height: 100px;
    text-align: center;
}
.moimg11 img{
    width: 350px;
    transition: 1.0s;
    transform: rotateX(0deg );
}
.moimg11:hover img {
    transform: rotateX( 360deg );
}

サンプルデモを見る

今度はX軸をもとに回転をさせたいからtransformプロパティの値はrotateXを使うよ。rotateXにすると水平に画像が回転するよ。

12.マウスオーバーで画像をX軸回転して裏にする

HTML

CSS

.moimg12 {
    width: 100%;
    height: 240px;
    line-height: 100px;
    text-align: center;
}
.moimg12 img {
    width: 350px;
    transition: 1.0s;
    transform: rotateX(0deg );
}
.moimg12:hover img {
    transform: rotateX( 180deg );
}

サンプルデモを見る

:hoverの時のtransformプロパティのrotateXの数字を180にすると画像が水平に回転して裏になるよ。

13.マウスオーバーで画像をY軸回転する

HTML

CSS

.moimg13 {
    width: 100%;
    height: 240px;
    line-height: 100px;
    text-align: center;
}
.moimg13 img{
    width: 350px;
    transition: 1.0s;
    transform: rotateY(0deg );
}
.moimg13:hover img {
    transform: rotateY( 360deg );
}

サンプルデモを見る

Y軸回転をする時は、transformプロパティの値にrotateYを使うよ。rotateYを使うと画像が垂直に回転するよ。ここでは:hoverの時のrotateYの数字を360degにしているから一回転してもとの位置に戻るよ。

14.マウスオーバーで画像をY軸回転して裏にする

HTML

CSS

.moimg14 {
    width: 100%;
    height: 240px;
    line-height: 100px;
    text-align: center;
}
.moimg14 img {
    width: 350px;
    transition: 1.0s;
    transform: rotateY(0deg );
}
.moimg14:hover img {
    transform: rotateY( 180deg );
}

サンプルデモを見る

:hoverの時のtransformプロパティのrotateYの数字を180degにしているから垂直に回転して画像が裏になるよ。