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

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

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

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

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

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

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

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

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

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

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

サンプルデモを見る

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

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

HTML

<div class="moimg1">
    <img src="images/sampleimg.jpg" />
</div>

</div>

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);
}

.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

<div class="moimg2">
    <img src="images/sampleimg.jpg" />
</div>

</div>

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);
}

.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

<div class="moimg3">
    <img src="images/sampleimg.jpg" />
</div>

</div>

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);
}

.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

<div class="moimg4">
    <img src="images/sampleimg.jpg" />
</div>

</div>

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);
}

.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

<div class="moimg5">
    <img src="images/sampleimg.jpg" />
</div>

</div>

CSS

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

.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

<div class="moimg6">
    <img src="images/sampleimg.jpg" />
</div>

</div>

CSS

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

.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

<div class="moimg7">
    <img src="images/sampleimg.jpg" />
</div>

</div>

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);

}

.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

<div class="moimg8">
    <img src="images/sampleimg.jpg" />
</div>

</div>

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);
}

.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

<div class="moimg9">
    <img src="images/sampleimg.jpg" />
</div>

</div>

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 );
}

.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

<div class="moimg10">
    <img src="images/sampleimg.jpg" />
</div>

</div>

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 );
}

.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

<div class="moimg11">
    <img src="images/sampleimg.jpg" />
</div>

</div>

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 );
}

.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

<div class="moimg12">
    <img src="images/sampleimg.jpg" />
</div>

</div>

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 );
}

.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

<div class="moimg13">
    <img src="images/sampleimg.jpg" />
</div>

</div>

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 );
}

.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

<div class="moimg14">
    <img src="images/sampleimg.jpg" />
</div>

</div>

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 );
}

.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にしているから垂直に回転して画像が裏になるよ。

まとめ

基本的に画像を変化させたい時は

transformプロパティを使って

値を動きによって変更すればいろんな変化を簡単にさせられるよ。

ぜひ試してみてね。

それじゃまた今度！

TwitterやFacebookのフォローよろしくね！

Twitter
@michelgorilla

Facebook
ミケランジェロ