ec-cube CSS3の「transform:scale()」でhover時に画像を拡大する方法

画像にマウスオーバーした時に拡大されるのってありますよね。
サイトに動きが出て、見る人の目をちょっと引いてくれます。

今回は、CSS3のtransform:scale()でhover時に画像を拡大する方法をご紹介します。

HTML

<div class="scale">
<img src="http://awd-web.com/wp/wp-content/uploads/1-1.png" />
</div>


CSS
.scale {
   width: 300px;
   height: 221px;
   overflow: hidden;
}

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


RESULT

transform: scale(1.2); で、X方向とY方向に拡大。
transition: transform 0.5s linear; で、0.5秒かけて一定時間で変化。

縮小したい場合、1.2を0.8など1以下にします。

X方向、Y方向それぞれ数値を変えることも可能です。

.scale2 {
   width: 300px;
   height: 221px;
   overflow: hidden;
}

.scale2 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;
}

.scale2 img:hover {
   -webkit-transform: scale(1.2,2);
   -moz-transform: scale(1.2,2);
   -o-transform: scale(1.2,2);
   -ms-transform: scale(1.2,2);
   transform: scale(1.2,2);
}


RESULT


CSS3が出てからしばらく経つけど、ほんと便利になったなーと実感しています。
opacityと組み合わせてみても面白いので、ぜひご活用くださいv
※当サイトのトップページでも使用しています。