CSS3の「transform:scale()」でhoverした時に画像を拡大する

029

CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することができます。

画像をマウスオーバーした時にその画像を少し拡大させて表示させるなどをすると、
サイトにインパクトのある動きを出すことができるので注目を集められます。

下記にCSS3の「transform:scale()」を使用して画像をマウスオーバーした時に
拡大させて表示した時の方法をメモします。

「transform:scale()」の使用方法

ブロック要素を固定させて画像を拡大させた場合の方法です。
画像をマウスオーバーするとアニメーションで拡大します。

CSS

CSS
※「transition: all 0.5s linear;」で指定してもOKです。allの場合は全てのプロパティに適用されます。

HTML

HTML
 
【表示例】
サンプルページ:【CSS】画像の拡大・縮小表示

「scale()」は下記のようにX方向とY方向で指定することもできます。

transform: scale(1.2,1.2);
また、縮小させて表示させたい場合は(0.8)のように1よりも小さい値を指定します。

サイト内の画像をマウスオーバーした時に動きを出したい場合など色々と利用できそうです。