CSS3のtransform:scale()でマウスオーバー時に画像を拡大させる!

2015/02/16

hover-transform-scale

こんにちは。
今回はCSS3のtransform:scale()でマウスオーバー時に画像を拡大させる!です。

最近、画像をマウスオーバーすると画像が拡大する効果を取り入れているサイトが増えているように思います。
CSSで手軽にできるようになったという事もあり、当サイトのトップページでも取り入れてみましたので、紹介します。

CSS3のtransform:scale()でマウスオーバー時に画像を拡大させる!

HTML

divの中に画像を入れます。

 

CSS

ボックスを固定し、はみ出た部分が表示されないようにhiddenを指定します。
imgのtransitionに変化する時間を設定し、img:hoverにtransform:scale()で拡大するように設定します。

 

画像を縮小させる場合は下記のように1より小さい数値にします。

 

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

 

いかがでしたか。CSSでできるとは便利な世の中になりましたね!
以上でCSS3のtransform:scale()でマウスオーバー時に画像を拡大させる!でした。

topへ戻る