CSS3:背景画像の拡大

goto_jp 443views 更新:2014年6月16日

サンプルはこちら

See the Pen aAubn by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

最近このようなエフェクトも見かけると思いますが、マウスオンで画像中心軸で拡大がされます。

CSS(Sass)

[class*=img] {
  background-position: center;
  background-size: 100%;
  &:hover {
    background-size:130%;
  }
}
.img1 {
  background-image: url(~);
}

要点部分のみ抜粋しています。

このUIの要点として、<img>による画像は使わずCSSで背景画像を設定している点です。
背景画像にすることで要素の範囲内で画像を表示し、中心点を合わせたまま拡大させるのが簡単になります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません