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

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

デモページを表示

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13

/* マウスオーバーで画像をズームアップ */ .hover-zoom {          /* .frame-img に追加する */   overflow: hidden;   cursor: zoom-in; }   .hover-zoom > img {   transition: transform 1s; }   .hover-zoom:hover > img {   transform: scale(1.25); }

補足

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

HTML

1 2 3

<ul>   <li><span class="frame-img hover-zoom"><img alt="画像" src="./files/image-01.jpg" /></span></li> </ul>

補足

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

関連投稿

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