[CSS] transform scale()を使って画像をマウスオーバー時に拡大する方法

MARKLEAPS

2025.04.14

CSSのtransform: scale()を使って、画像や背景画像をマウスオーバー時に拡大させる方法をご紹介します。

img画像を拡大する

・html

<div class="img-wrap">
    <img src="images/img_hover-zoom01.jpg" alt="" />
</div>

</div>

・css

.img-wrap {
  aspect-ratio: 16 / 11;
  overflow: hidden; /* ホバー時の枠外に飛び出し防止 */
}

.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease; /* 滑らかに拡大 */
}

.img-wrap:hover img {
  transform: scale(1.1); /* ホバーした際に画像を拡大 */
}

.img-wrap {

aspect-ratio: 16 / 11;

overflow: hidden; /* ホバー時の枠外に飛び出し防止 */

}

.img-wrap img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.4s ease; /* 滑らかに拡大 */

}

.img-wrap:hover img {

transform: scale(1.1); /* ホバーした際に画像を拡大 */

}

ポイント

transform: scale()を使用して、img要素をホバーした際に画像を拡大します。
滑らかな拡大効果を実現するために、transitionを使ってアニメーションを追加しています。
親要素にoverflow: hidden;を指定することで、画像がホバー時に枠外に飛び出すのを防ぎます。

背景画像像を拡大する

・html

<div class="bg-img-wrap"></div>

1	<div class="bg-img-wrap"></div>

・css

.bg-img-wrap {
  position: relative;
  aspect-ratio: 16 / 11;
  max-width: 600px;
  overflow: hidden; /* ホバー時の枠外に飛び出し防止 */
}

.bg-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('images/img_hover-zoom01.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform 0.4s ease; /* 滑らかに拡大 */
}

.bg-img-wrap:hover::before {
  transform: scale(1.1); /* ホバーした際に画像を拡大 */
}

.bg-img-wrap {

position: relative;

aspect-ratio: 16 / 11;

max-width: 600px;

overflow: hidden; /* ホバー時の枠外に飛び出し防止 */

}

.bg-img-wrap::before {

content: '';

position: absolute;

inset: 0;

background-image: url('images/img_hover-zoom01.jpg');

background-repeat: no-repeat;

background-position: center;

background-size: cover;

transition: transform 0.4s ease; /* 滑らかに拡大 */

}

.bg-img-wrap:hover::before {

transform: scale(1.1); /* ホバーした際に画像を拡大 */

}

ポイント

transform: scale()を使用して、ホバー時に背景画像を拡大させます。
滑らかな拡大効果を実現するために、transitionを使ってアニメーションを追加しています。
div要素にoverflow: hidden;を指定することで、背景画像がホバー時に枠外に飛び出すのを防ぎます。

デモ

See the Pen
Untitled by mkl may (@mkl-may)
on CodePen.

CSS

よく読まれている関連記事

[CSS] カラーコードで透明度を指定する方法

[CSS] transform scale()を使って画像をマウスオーバー時に拡大する方法

img画像を拡大する

背景画像像を拡大する

デモ

よく読まれている関連記事

[CSS] カラーコードで透明度を指定する方法

関連最新記事

CSSプロパティの記述順｜視覚順とアルファベット順

[CSS] shape-outside プロパティで画像にテキストを回り込ませる方法

[HTML・CSS] 説明リストdlのdtとddを横並びに表示する方法（コピペで使えるコード付き）

[CSS] 疑似クラス is() とwhere() の使い方と違い

社内風景2

社内風景