2020年11月20日金曜日

マウスオーバーで画像をズームアップ

画像のレスポンシブ対応 で表示した画像をマウスオーバーした時にズームアップする。

デモページを表示

CSS

補足
  • 3行目:ズームアップ時に、はみだした部分を表示しない。
  • 8行目:ズームアップ時のスピードを設定。
  • 12行目:ズームアップ時の拡大率を設定。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足
  • frame-img クラスに加えて hover-zoom クラスを追加する。

関連投稿