CSS3の「transform:scale()」でhoverした時に画像を拡大する

CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することができます。

画像をマウスオーバーした時にその画像を少し拡大させて表示させるなどをすると、
サイトにインパクトのある動きを出すことができるので注目を集められます。

下記にCSS3の「transform:scale()」を使用して画像をマウスオーバーした時に
拡大させて表示した時の方法をメモします。

1 「transform:scale()」の使用方法
- - 1.0.1 CSS
  - 1.0.2 HTML
2 この記事を読んだ方はこちらも読まれています。

「transform:scale()」の使用方法

ブロック要素を固定させて画像を拡大させた場合の方法です。
画像をマウスオーバーするとアニメーションで拡大します。

.scale{
	overflow:hidden;
	margin:0 0 20px;
}
.scale 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;
}
.scale 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);
}

.scale_up {
	width: 400px;
	height: 300px;
	border: 1px solid #CCC;
	overflow: hidden;
}
.scale_up 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;
}
.scale_up 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);
}

.scale_down {
	width: 400px;
	height: 300px;
	border: 1px solid #CCC;
	overflow: hidden;
}
.scale_down 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;
}
.scale_down img:hover {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}

.scale{

overflow:hidden;

margin:0 0 20px;

}

.scale 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;

}

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

}

.scale_up {

width: 400px;

height: 300px;

border: 1px solid #CCC;

overflow: hidden;

}

.scale_up 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;

}

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

}

.scale_down {

width: 400px;

height: 300px;

border: 1px solid #CCC;

overflow: hidden;

}

.scale_down 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;

}

.scale_down img:hover {

-webkit-transform: scale(0.8);

-moz-transform: scale(0.8);

-o-transform: scale(0.8);

-ms-transform: scale(0.8);

transform: scale(0.8);

}

※「transition: all 0.5s linear;」で指定してもOKです。allの場合は全てのプロパティに適用されます。

HTML

<div class="scale">
<a class="scale" href="https://biroku.popmedia.tokyo/wp/wp-content/uploads/029-e1512370767163.jpg">
<img class="scale alignleft" src="https://biroku.popmedia.tokyo/wp/wp-content/uploads/029-e1512370767163.jpg" alt="" width="400" height="267" />
</a></div>