画像をhoverしたら拡大させる方法がありますが、ボックスの外にはみ出さずに拡大させる方法について書いていきます。
ポイント
一番のポイントは、親要素にoverflowを指定し、値をhiddenにするかしないかです。これにより画像が親要素からはみ出ずに拡大するかしないかが決まります。
コード例
See the Pen scale-with-overflow by Takuma (@takushin0202) on CodePen.
img画像を囲む親要素（img-box）から画像がはみ出さずに拡大してることが分かると思います。
それぞれのコードを見ていきます。
<< HTML >>
<div class="img-box"> <!-- imgタグをdiv要素で囲む -->
<img src="画像パス" alt="" />
</div>// SCSS //
.img-box {
width:250px;
overflow: hidden; /* imgタグを囲む親要素にoverflow: hidden;を指定することで画像が親要素からはみ出さずに拡大している */
img {
width: 100%;
transition: all 0.3s ease; /* 0.3秒かけて拡大。easeは変化の始まりと終わりをゆっくり変化せよ、の意味 */
&:hover {
transform:scale(1.1); /* ホバーしたら1.1倍の大きさに拡大せよ、の意味 */
}
}
}overflowはそもそも「あふれ出る」という意味です。over（〜を超えて）+ flow（液体などが流れる）で、コップの上端に水が収まり切らずにどんどんあふれ出て流れてしまってるイメージですね。
このイメージのように、親要素が抱える子要素の中身が多すぎて収まらない場合にoverflowを指定して子要素をhidden（隠れた）な状態にしているので、親要素からはみ出すことなく画像の拡大ができるわけですね。
overflowがない場合はどうなるか
overflowを指定しない場合も見ていきましょう。
See the Pen scale-without-overflow by Takuma (@takushin0202) on CodePen.
画像にマウスオーバーしたら親要素からはみ出て拡大してるのが分かると思います。
ちなみに背景画像の場合
ちなみにimgタグではなく、CSSで背景画像を読み込む場合でも基本（背景画像の親要素にoverflowを指定する）は同じです。
See the Pen scale-with-background by Takuma (@takushin0202) on CodePen.
一点注意として、背景画像の場合は親要素の中身の量で高さが決まるので、文字などのコンテンツを用意するか、背景画像に高さを指定しないと画像が表示されません。
以上参考になれば嬉しいです。
コメント