lab
ウェブデザインの試作品を公開しています。
2020年11月20日金曜日
マウスオーバーで画像をズームアップ
画像のレスポンシブ対応
で表示した画像をマウスオーバーした時にズームアップする。
デモページを表示
CSS
補足
3行目:ズームアップ時に、はみだした部分を表示しない。
8行目:ズームアップ時のスピードを設定。
12行目:ズームアップ時の拡大率を設定。
レイアウトが崩れる場合は
リセットCSS・共通CSS
の内容を確認。
HTML
補足
frame-img クラスに加えて hover-zoom クラスを追加する。
関連投稿
画像のレスポンシブ対応
次の投稿
前の投稿
ホーム