画像にマウスオーバーした時に拡大されるのってありますよね。
サイトに動きが出て、見る人の目をちょっと引いてくれます。
サイトに動きが出て、見る人の目をちょっと引いてくれます。
今回は、CSS3のtransform:scale()でhover時に画像を拡大する方法をご紹介します。
HTML
<div class="scale"> <img src="https://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
※当サイトのトップページでも使用しています。