[CSS] マウスでhoverした時にアニメーションで画像を拡大する方法

photo_00269

マウスオーバーしたときに画像を拡大・縮小する方法です。これを実現するにはCSS3の「transform:scale()」を利用します。
CSSだけで簡単にアニメーションが作れるので便利です。

ソース

HTML

CSS

※「-webkit-transition: -webkit-transform 0.6s linear;」は変化のタイミング・進行割合を指定しています。
参考「transition-timing-function | HTMLリファレンス

実行結果

拡大(sample01)

縮小(sample02)

  • Categories

  • タグ

  • アーカイブ

  • 最近の投稿