CSSで画像をホバーズーム！スムーズな拡大アニメーションの作り方

1. 【初級編①】imgタグを枠内でズームさせる方法

まずは、最も一般的な <img> タグを使った方法です。HTMLの構造がシンプルなので、ブログ記事内の画像などに向いています。

See the Pen 初級：hover by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

基本的な仕組み（HTML）

ポイントは、画像を囲む親要素（コンテナ）に overflow: hidden; をかけることです。これがないと、拡大した画像が枠を突き破ってしまいます。

<div class="zoom-container">
  <img src="image.jpg" alt="ズームする画像" class="img-zoom">
</div>

実装CSS：滑らかな動きの秘訣（transitionとtransform）

HTMLの準備ができたら、次はいよいよ動き（CSS）を付けていきますよ！この数行が、ただ画像を拡大させるだけでなく、枠の中に収めて、さらにスムーズに見せる秘訣なんです。

/* 親要素（枠）のスタイル */
.zoom-container {
  overflow: hidden; /* 枠からはみ出させない（ここが重要！） */
}

/* 画像（子要素）のスタイル */
.img-zoom {
  width: 100%; /* 枠幅に合わせる */
  height: auto; /* 高さを自動調整 */
  transition: transform 0.3s ease; /* 滑らかなアニメーション（時間・イージング） */
}

/* ホバー時の拡大（親要素がホバーされたとき） */
.zoom-container:hover .img-zoom {
  transform: scale(1.1); /* ホバー時に1.1倍に拡大 */
}

コードのポイント解説（頼れる先輩メモ）

現場で数々のサイトを構築し、オンライン講師として生徒さんの「カクつく動きを直したい！」という悩みに寄り添ってきた経験から、初心者の方がハマりやすいポイントを意識して解説します。

2. 【初級編②】背景画像（background-image）をズームさせる

バナーの背景に文字を乗せたい場合などは、 background-image を使ったズームが便利です。要素のサイズを固定しやすいため、デザインの統一感を出しやすいのがメリットです。

See the Pen 初級編：hover 背景画像 by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

実装コード：HTMLとCSSのセット

背景画像のズームを滑らかに行うには、少し工夫が必要です。具体的には、画像を直接ズームさせるのではなく、画像を「擬似要素（ ::before ）」として配置し、その擬似要素をズームさせる方法が、現場では一般的です。

この方法なら、画像の上に文字を乗せても、文字まで一緒に拡大されることはありません。さあ、コピペして試してみましょう！

<!-- HTMLの構造 -->
<div class="bg-zoom-container">
  <div class="bg-zoom-content">
    <h3>背景画像の上に文字</h3>
    <p>擬似要素を使えば、文字は拡大されません。</p>
  </div>
</div>

/* CSSの構造（追加CSSにコピペ） */
.bg-zoom-container {
  overflow: hidden; /* 枠からはみ出させない（必須！） */
  position: relative; /* 擬似要素（画像）の基準点にする */
  width: 100%; /* 枠幅（任意） */
  height: 300px; /* 高さ（任意） */
}

/* 擬似要素として背景画像を配置 */
.bg-zoom-container::before {
  content: ""; /* 擬似要素には必須 */
  display: block;
  position: absolute; /* 枠全体に広げる */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('path/to/image.jpg'); /* 背景画像のパス（ここを変更！） */
  background-size: cover; /* 枠を埋め尽くす */
  background-position: center; /* 中央に配置 */
  transition: transform 0.6s ease; /* 滑らかなアニメーション */
  z-index: -1; /* 文字の後ろに配置 */
}

/* ホバー時の拡大（親要素がホバーされたとき、擬似要素を拡大） */
.bg-zoom-container:hover::before {
  transform: scale(1.1); /* 1.1倍に拡大 */
}

/* 文字（コンテンツ）のスタイル（任意） */
.bg-zoom-content {
  position: relative; /* 文字を画像の上に表示 */
  z-index: 1; /* 画像より前面に */
  display: flex; /* 中央揃えにするため */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%; /* 枠全体に */
  color: #fff; /* 文字色を白に */
  text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 文字に影を付けて見やすく */
}

コードのポイント解説

オンライン講師として生徒さんの課題を見るとき、この「擬似要素」の使い方は少し難易度が高いので、ハマりやすいポイントを丁寧に解説します。