• 操作
  • エリアホバー

#area hover 009

ホバー時に背景画像の比率が変わる

参考サイトURL
動きの解説

背景画像がズームアップしたり、縦横比が変わるように見える動きは、静止画に奥行きとストーリー性を与えます。不動産や旅行サイトなど、写真の魅力を最大限に伝えたいコンテンツで、ユーザーの没入感を深める効果があります。実装はbackground-sizeの変更や、imgタグへのtransform: scale適用で行います。画像が拡大される際、画質が荒れないよう十分な解像度の素材を用意すること、そして拡大しても枠内に収めるためのoverflow: hiddenの設定が必須です。