ホバーエフェクトとは

マウスが乗った（ホバーした）ときに見た目が変化する演出の総称。浮く・沈む・拡大するなどの表現がある。

概要

マウスカーソルが要素に乗ったとき（ホバー時）に見た目を変化させる演出の総称です。カードが浮き上がる、ボタンが沈み込む、画像が少しズームするなど表現はさまざまで、多くは CSS の :hover 疑似クラスと transition を組み合わせて実装します。「触れると反応する」感覚を伝えることで、その要素がクリックできることをユーザーに伝える役割もあります。

別名

表記ゆれ：ホバーエフェクト、ホバーアニメーション、マウスオーバー効果、ロールオーバー

「ロールオーバー」は古くからある呼び方で、画像を切り替える表現を指すこともありますが、現在は「ホバーエフェクト」が最も一般的です。

AI への伝え方

「カードにホバーエフェクトを付けて」で伝わります。浮かせたいのか、沈ませたいのか、拡大させたいのかという方向性と、動きの強さ（少しだけ・はっきりと）を伝えると仕様がぶれません。スマートフォンなど、ホバーそのものができない環境での代替挙動（タップ時にどうするか）を決めておくと実装がスムーズです。

似たパーツとの違い

「トランジション」はホバーエフェクトを滑らかに見せるための土台となる技法で、ホバーエフェクトはその使い道の一つです。「下線アニメーション」はテキストリンクの下線だけを動かす特化した表現で、ホバーエフェクトはカードやボタンなど要素全体の変化を指す、より広い言葉です。

デモ

カードが浮く

画像がズーム

コード

HTML

<div class="hover-effect-demo">
  <div class="hover-effect-demo__card">
    <p>カードが浮く</p>
  </div>
  <button class="hover-effect-demo__button" type="button">ボタンが沈む</button>
  <div class="hover-effect-demo__image">
    <span>画像がズーム</span>
  </div>
</div>

CSS

.hover-effect-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  font-family: sans-serif;
}

.hover-effect-demo__card {
  padding: 20px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
  font-size: 13px;
  color: #333333;
}

.hover-effect-demo__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

.hover-effect-demo__button {
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  background: #0017c1;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 0 #00118f;
  transform: translateY(0);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hover-effect-demo__button:hover,
.hover-effect-demo__button:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #00118f;
}

.hover-effect-demo__image {
  width: 140px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #0017c1 0%, #4dd0e1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
}

.hover-effect-demo__image span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.hover-effect-demo__image:hover span {
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .hover-effect-demo__card,
  .hover-effect-demo__button,
  .hover-effect-demo__image span {
    transition: none;
  }
}