ホバー時にズーム＆ダークの作り方｜transform とオーバーレイ

2026年8月1日

マウスを乗せるとズーム・暗転する画像カード

ホバー時に画像をズームしたり暗くしたりする演出を、3パターンで解説します。各デモと同じ見た目を再現できるHTML・CSSを掲載しています。
HTML・CSS・JSコードプレビューツールでも動作を確認できます。

① ホバーでズーム — overflow ではみ出しを切る

HELLO
WORLD

HTML

<div class="hv-zoom-wrap">
  <div class="hv-zoom-img">
    <p class="hv-zoom-label">HELLO<br>WORLD</p>
  </div>
</div>

CSS

.hv-zoom-wrap {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 12px;
}

.hv-zoom-img {
  width: 100%;
  height: 100%;
  background: #38bdf8;
  transition: transform 0.3s ease;
}

.hv-zoom-label {
  margin: 0;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.hv-zoom-img:hover {
  transform: scale(1.6);
}

overflow: hidden + transform: scale()

親に overflow: hidden を付けると、拡大した子要素のはみ出しを切れます。ズーム自体は transform: scale() だけで足ります。画像カードやバナーのホバー表現の基本形です。

② ホバーで暗転 — オーバーレイを重ねる

HELLO
WORLD

HTML

<div class="hv-dark-wrap">
  <div class="hv-dark-img">
    <p class="hv-dark-label">HELLO<br>WORLD</p>
  </div>
  <div class="hv-dark-veil"></div>
</div>

CSS

.hv-dark-wrap {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.hv-dark-img {
  width: 100%;
  height: 100%;
  background: #fb7185;
}

.hv-dark-label {
  margin: 0;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.hv-dark-veil {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0.3;
  transition: background-color 0.3s ease;
}

.hv-dark-veil:hover {
  background-color: #000;
}

absolute のオーバーレイ

暗転は画像本体をいじらず、上に重ねたレイヤーの背景色を変えると制御しやすいです。サムネイルの上にキャプションを載せたいときにも同じ考え方が使えます。

③ ズームしながら暗転 — 隣接セレクタで同時発火

HELLO
WORLD

HTML

<div class="hv-both-wrap">
  <div class="hv-both-img">
    <p class="hv-both-label">HELLO<br>WORLD</p>
  </div>
  <div class="hv-both-veil"></div>
</div>

CSS

.hv-both-wrap {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.hv-both-img {
  width: 100%;
  height: 100%;
  background: #84cc16;
  transition: transform 0.3s ease;
}

.hv-both-label {
  margin: 0;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.hv-both-img:hover {
  transform: scale(1.6);
}

.hv-both-veil {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0.3;
  transition: background-color 0.3s ease;
  pointer-events: none;
}

.hv-both-img:hover + .hv-both-veil {
  background-color: #000;
}

隣接セレクタ + pointer-events: none

画像の :hover をきっかけに、隣のオーバーレイを変えます。オーバーレイに pointer-events: none を付けておくと、上に重なっていてもホバー判定を邪魔しません。

注意点：ズームでは親の overflow: hidden を忘れるとはみ出しが目立ちます。暗転レイヤーを重ねるときは、クリックやホバーを遮っていないかを pointer-events で確認してください。スマホではホバーが効きにくいので、タップ前提のUIと併用するか、必須操作には使わない方が安全です。

scale と width を変える違いは？

transform: scale() は見た目だけ拡大し、レイアウトへの影響が少ないです。隣の要素を押し広げたくないホバー演出向きです。実サイズを変えたいときは width / height 側を使います。

暗転だけ効いてズームしないときは？

③ではオーバーレイがホバーを奪っていないか確認してください。pointer-events: none が無いと、上のレイヤーにマウスが乗ったまま画像の :hover が外れます。

画像ファイルでも同じですか？

同じです。色付きの div の代わりに img を置き、width: 100% と height: 100%、object-fit: cover を付けるとカード向きになります。

スマホでも使えますか？

ホバーは主にマウス向けです。タッチ端末では一瞬しか見えないことがあります。見た目のアクセントとしては使えますが、操作の唯一の手がかりにはしないでください。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。