CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することができます。
画像をマウスオーバーした時にその画像を少し拡大させて表示させるなどをすると、
サイトにインパクトのある動きを出すことができるので注目を集められます。
下記にCSS3の「transform:scale()」を使用して画像をマウスオーバーした時に
拡大させて表示した時の方法をメモします。
「transform:scale()」の使用方法
ブロック要素を固定させて画像を拡大させた場合の方法です。
画像をマウスオーバーするとアニメーションで拡大します。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
.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); } |
HTML
1 2 3 4 |
<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> |
【表示例】
サンプルページ:【CSS】画像の拡大・縮小表示
「scale()」は下記のようにX方向とY方向で指定することもできます。
transform: scale(1.2,1.2);
また、縮小させて表示させたい場合は(0.8)のように1よりも小さい値を指定します。
サイト内の画像をマウスオーバーした時に動きを出したい場合など色々と利用できそうです。