CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することができます。
画像をマウスオーバーした時にその画像を少し拡大させて表示させるなどをすると、サイトにインパクトのある動きを出すことができるので注目を集められます。
下記にCSS3の「transform:scale()」を使用して画像をマウスオーバーした時に拡大させて表示した時の方法をメモします。
【画像 拡大表示（ブロック固定なし）▼】
【画像 拡大表示（ブロック固定）▼】
【画像 縮小表示 ▼】
※「transition: all 0.5s linear;」で指定してもOKです。allの場合は全てのプロパティに適用されます。
HTML
|
1 2 3 4 |
<div class="scale"> <a class="scale" href="https://popmedia.jp/wp/wp-content/uploads/2019/01/a31c3d5182854daf0f7fcf8afc5d2423_s-1-e1546961275915.jpg"> <img class="scale alignleft" src="https://popmedia.jp/wp/wp-content/uploads/2019/01/a31c3d5182854daf0f7fcf8afc5d2423_s-1-e1546961275915.jpg" alt="" width="400" height="267" /> </a></div> |
|
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); } |
【表示例】
サンプルページ：【CSS】画像の拡大・縮小表示
「scale()」は下記のようにX方向とY方向で指定することもできます。
transform: scale(1.2,1.2);
また、縮小させて表示させたい場合は(0.8)のように1よりも小さい値を指定します。
サイト内の画像をマウスオーバーした時に動きを出したい場合など色々と利用できそうです。
