CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することができます。
画像をマウスオーバーした時にその画像を少し拡大させて表示させるなどをすると、
サイトに動きを出すことができるのでいいと思います。
下記にCSS3の「transform:scale()」を使用して画像をマウスオーバーした時に
拡大させて表示した時の方法をメモします。
■ 「transform:scale()」の使用方法
ブロック要素を固定させて画像を拡大させた場合の方法です。
画像をマウスオーバーするとアニメーションで拡大します。
【CSS】
.scale { width: 400px; height: 300px; 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); }
※「transition: all 0.5s linear;」で指定してもOKです。
allの場合は全てのプロパティに適用されます。
【HTML】
<div class="scale"> <img src="./css_scale.jpg"> </div>
【表示例】
「scale()」は下記のようにX方向とY方向で指定することもできます。
transform: scale(1.2,1.2);
また、縮小させて表示させたい場合は(0.8)のように1よりも小さい値を指定します。
サイト内の画像をマウスオーバーした時に動きを出したい場合など色々と利用できそうです。