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

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

デモページを表示

CSS

補足

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

HTML

補足

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

関連投稿

• 画像のレスポンシブ対応