画像にマウスオーバーした時に拡大されるのってありますよね。
サイトに動きが出て、見る人の目をちょっと引いてくれます。
サイトに動きが出て、見る人の目をちょっと引いてくれます。
今回は、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
※当サイトのトップページでも使用しています。
1980年6月生まれ。
秋田県在住。
地元のIT関連会社や市の機関でweb制作に携わり、2011年1月にフリーランスに。現在は子育てしながら日々業務にあたっています。