ホバーのときに画像を拡大する方法
2021/11/17
- 書いた人:
- futappa_staff
- カテゴリ:
- CSS
:
- コーディング
- 9,241 views
ホバーしたらサムネイルが拡大するレイアウトの作り方を紹介します。よく見るレイアウトなので、ぜひやってみてください♪

目次
はじめに
よく見るホバーしたらサムネイルが拡大するレイアウトを作ってみようと思います。CSSだけでできますので、1つずつ確認していきましょう。
<サンプル>
実装方法について
1、divの中に写真を配置します。
<div class="sample"> <img src="https://placeimg.com/200/150/people" alt=""> </div>
.sample{ width: 200px; height: 150px; border: 3px solid #999;/* 装飾のため、なくてもOK */ }
2、ホバーしたときに拡大するようにする。
拡大するために、img:hoverのところに、「transform: scale(1.2);」をつけます。さらにimgに「transition:all 0.3s;」をつけることで、動きがスムーズになります。
ですが、このままでは枠(div)から画像がはみ出てしまいましたね‥!
<div class="sample"> <img src="https://placeimg.com/200/150/people" alt=""> </div>
.sample{ width: 200px; height: 150px; border: 3px solid #999;/* 装飾のため、なくてもOK */ } .sample img{ /* 拡大するのにかかる時間 */ transition:all 0.3s; } .sample img:hover{ /* ホバーしたら1.2倍サイズに拡大 */ transform: scale(1.2); }
3、はみ出た部分を非表示にする。
画像がはみ出ないように、divに対して「overflow: hidden;」を追加します。これで完成です!!
<div class="sample"> <img src="https://placeimg.com/200/150/people" alt=""> </div>
.sample{ /* 拡大してはみ出した部分を非表示にする */ overflow: hidden; width: 200px; height: 150px; border: 3px solid #999;/* 装飾のため、なくてもOK */ } .sample img{ /* 拡大するのにかかる時間 */ transition:all 0.3s; } .sample img:hover{ /* ホバーしたら1.2倍サイズに拡大 */ transform: scale(1.2); }
まとめ
うまくできましたか?よく見るレイアウトなので、この記事で理解が深まったら幸いです♪