【CSS】hoverしたら画像をはみ出さずに拡大させる方法

画像をhoverしたら拡大させる方法がありますが、ボックスの外にはみ出さずに拡大させる方法について書いていきます。

ポイント
コード例
overflowがない場合はどうなるか
ちなみに背景画像の場合

ポイント

一番のポイントは、親要素に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（隠れた）な状態にしているので、親要素からはみ出すことなく画像の拡大ができるわけですね。