ホバーアニメーションの実装解説｜CSS Hover Animation

2026年4月8日

ホバーアニメーションデザイン詳細

CSS の transform とオーバーレイ要素を使って、マウスホバー時にズームや暗転を加える基本パターンを整理した詳細ページです。元記事の 3 パターンをそのまま実演できる形にしています。

ホバー時にズーム

HELLO
WORLD

HTML

<div class="cover-box">
  <div class="image-box">
    <p>HELLO<br>WORLD</p>
  </div>
</div>

CSS

.cover-box {
  width: 200px;
  height: 200px;
  text-align: center;
  overflow: hidden;
}

.image-box {
  width: 100%;
  height: 100%;
  background: skyblue;
  transition: transform 0.3s ease;
}

p {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.image-box:hover {
  transform: scale(1.6);
}

overflow: hidden + transform: scale()

親要素に overflow: hidden を入れておくと、拡大した子要素のはみ出しを切り取れます。ズーム演出は transform: scale() だけで実装でき、画像カードやバナーのホバー表現で使いやすい基本形です。

ホバー時に暗転

HELLO
WORLD

HTML

<div class="cover-box">
  <div class="image-box">
    <p>HELLO<br>WORLD</p>
  </div>
  <div class="dark-cover"></div>
</div>

CSS

.cover-box {
  width: 200px;
  height: 200px;
  text-align: center;
  position: relative;
}

.image-box {
  width: 100%;
  height: 100%;
  background: tomato;
}

p {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

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

.dark-cover:hover {
  background-color: black;
}

absolute オーバーレイ

暗転は別レイヤーの要素を重ねると制御しやすくなります。画像本体を触らずに黒いカバーだけを変化させるので、彩度や明度を落としたい場面で応用しやすい構成です。

ホバー時にズームしながら暗転

HELLO
WORLD

HTML

<div class="cover-box">
  <div class="image-box">
    <p>HELLO<br>WORLD</p>
  </div>
  <div class="dark-cover"></div>
</div>

CSS

.cover-box {
  width: 200px;
  height: 200px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.image-box {
  width: 100%;
  height: 100%;
  background: lime;
  transition: transform 0.3s ease;
}

p {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.image-box:hover {
  transform: scale(1.6);
}

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

.image-box:hover + .dark-cover {
  background-color: black;
}

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

ズームと暗転を同時に発火させるときは、画像のホバー状態を使って隣のオーバーレイを変化させます。オーバーレイに pointer-events: none を付けておくと、上に重なってもホバー判定を邪魔しません。

補足ホバーズームは単体でも成立しますが、サムネイルやカードでは overflow: hidden を忘れるとはみ出しが目立ちます。暗転レイヤーを重ねる場合は、操作対象を遮らないかどうかを pointer-events で確認してください。

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

ホバーアニメーションの実装解説｜CSS Hover Animation

ホバーアニメーション デザイン詳細

ホバー時にズーム

ホバー時に暗転

ホバー時にズームしながら暗転

ホバーアニメーションデザイン詳細