CSSトランジションとoverflowによるホバー時の画像ズーム

ホバー時の画像ズーム

画像ズーム効果は、ユーザーがホバーした時に画像をスムーズに拡大し、overflow: hiddenを持つコンテナが拡大された画像をクリップして境界内に収めます。

CSSコード

.image-container {
  overflow: hidden;
  border-radius: 8px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.5s ease-out;
}

.image-container:hover img {
  transform: scale(1.1);
}

動作の仕組み

1. コンテナにoverflow: hiddenがあり、境界を超えるコンテンツをクリップ
2. 画像はscale(1)でコンテナを埋める
3. ホバーで画像がscale(1.1)に拡大 — 元より10%大きい
4. コンテナがオーバーフローをクリップし、ズーム効果がコンテナ内に収まる

スケール値の選択

• scale(1.05) — 控えめなズーム、プロフェッショナルな印象
• scale(1.1) — 目立つズーム、最も一般的
• scale(1.15) — 顕著なズーム、注目を集める
• scale(1.2+) — ドラマチックなズーム、控えめに使用

オーバーレイの追加

ギャラリースタイルの効果のために、ズームとカラーオーバーレイを組み合わせます：

.image-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.image-container:hover::after {
  background: rgba(0, 0, 0, 0.3);
}

パフォーマンス

transform: scale()アプローチは、コンポジットレイヤーで動作するためGPUアクセラレーションされます。ブラウザは画像を再レンダリングせずにラスタライズされたレイヤーをスケーリングします。これにより、widthとheightのアニメーションよりもはるかに効率的です。