CSS3：背景画像の拡大

サンプルはこちら

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で背景画像を設定している点です。
背景画像にすることで要素の範囲内で画像を表示し、中心点を合わせたまま拡大させるのが簡単になります。