本文へスキップ
  1. Web BENTO CSS
  2. カテゴリ一覧
  3. ホバーアニメーション
07 / HOVER 12 パーツ

CSSホバーアニメーション 12選

コピペで使えるCSSホバーアニメーションのサンプル集。プレビューにマウスを乗せると実際の動きを確認でき、シャッフルで色や角度のバリエーションを試せます。リンク・カード・画像向けのマウスオーバー演出を中心に、気に入ったらそのままコピーしてください。クラス名は .bnto-hov-underline 形式です。

該当するパーツが見つかりませんでした。

リンクテキスト

下線スライド

.bnto-hov-underline {
  position: relative; display: inline-block;
  color: hsl(5 100% 60%);
  text-decoration: none;
}
.bnto-hov-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2.5px;
  background: hsl(5 100% 60%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.bnto-hov-underline:hover::after { transform: scaleX(1); }
使い方のコツ

下線が伸びる向きは transform-origin で決まります。left なら左から、right なら右から、center なら中央から。width ではなく scaleX をアニメさせるとカクつかず滑らかです。

カードの内容

カード浮き上がり

.bnto-hov-lift {
  background: #fff; border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .25s, box-shadow .25s;
}
.bnto-hov-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 36px hsl(5 100% 60% / 0.35);
}
使い方のコツ

記事一覧やサービス紹介など「カード全体がリンク」のUIに定番の動き。影の色をサイトのアクセント色にすると華やかに、rgba(0,0,0,.15) にすると落ち着いた印象になります。浮かせる量（-8px）と影の距離はセットで調整を。

画像ズーム

/* 親の overflow: hidden がはみ出しを隠す */
.bnto-hov-zoom {
  overflow: hidden; border-radius: 14px;
}
.bnto-hov-zoom img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.bnto-hov-zoom:hover img { transform: scale(1.28); }
使い方のコツ

拡大するのは img 側、隠すのは親側という役割分担がポイント。拡大率は 1.05〜1.15 が上品です。transition: transform .4s と少しゆっくりめにすると高級感が出ます。

詳しく見る

画像オーバーレイ

.bnto-hov-overlay { position: relative; overflow: hidden; border-radius: 14px; }
.bnto-hov-overlay .cap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
  background: hsl(202 73% 45% / 0.8);
  opacity: 0; transition: opacity .3s;
}
.bnto-hov-overlay:hover .cap { opacity: 1; }
使い方のコツ

ギャラリーや実績一覧で「ホバーするとタイトルが出る」定番パターン。オーバーレイの濃さは / 0.8 の部分で調整します。.cap に transform: translateY(8px) → hover で 0 を足すと、文字がふわっと持ち上がる演出になります。

Hover me

背景スワイプ

.bnto-hov-swipe {
  display: inline-block; text-decoration: none;
  color: hsl(327 60% 52%);
  border: 2.5px solid hsl(327 60% 52%);
  padding: 12px 26px; border-radius: 12px;
  background-image: linear-gradient(hsl(327 60% 52%), hsl(327 60% 52%));
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left;
  transition: background-size .3s, color .3s;
}
.bnto-hov-swipe:hover { background-size: 100% 100%; color: #fff; }
使い方のコツ

疑似要素を使わず、単色グラデを背景画像にして幅を 0% → 100% に伸ばす方式。background-repeat: no-repeat が必須です。満ちる方向は background-position（left / right / center）で変えられます。

Hover me

拡大

.bnto-hov-scale {
  background: hsl(202 73% 56%); color: #fff;
  padding: 16px 30px; border-radius: 14px;
  transition: transform .25s;
}
.bnto-hov-scale:hover { transform: scale(1.1); }
使い方のコツ

拡大すると隣の要素と重なるため、グリッドの gap を広めに確保しておくと安心。バナーやサムネイルなら 1.05 前後、単独で目立たせたいものは 1.1〜1.15 が目安です。

Hover me

傾き

.bnto-hov-tilt {
  transition: transform .25s;
}
.bnto-hov-tilt:hover {
  transform: rotate(-4deg) scale(1.04);
}
使い方のコツ

傾きは -2〜-6deg 程度が自然。scale と組み合わせると「つまんで持ち上げた」ような遊び心のある動きになります。ステッカー風のカードやSNSリンクと好相性です。

Hover me

下から塗り

.bnto-hov-fill {
  position: relative; overflow: hidden; z-index: 0;
  display: inline-block; text-decoration: none;
  background: #fff; color: hsl(119 31% 45%);
  border: 2.5px solid hsl(119 31% 45%);
  padding: 12px 26px; border-radius: 12px;
  transition: color .3s;
}
.bnto-hov-fill::before {
  content: ""; position: absolute; inset: 0;
  background: hsl(119 31% 45%);
  transform: translateY(100%); transition: transform .3s;
  z-index: -1;
}
.bnto-hov-fill:hover { color: #fff; }
.bnto-hov-fill:hover::before { transform: translateY(0); }
使い方のコツ

塗りの方向は translateY(-100%) で上から、translateX(-100%) で左からに変更できます。本体の z-index: 0 と疑似要素の z-index: -1 はペアで必須。忘れると塗りが文字の上に被ります。

Hover me

枠線ドロー

.bnto-hov-border {
  position: relative; padding: 16px 30px;
}
.bnto-hov-border::before,
.bnto-hov-border::after {
  content: ""; position: absolute;
  width: 0; height: 0; box-sizing: border-box;
  transition: width .3s, height .3s;
}
.bnto-hov-border::before {
  top: 0; left: 0;
  border-top: 2.5px solid hsl(258 47% 56%);
  border-left: 2.5px solid hsl(258 47% 56%);
}
.bnto-hov-border::after {
  bottom: 0; right: 0;
  border-bottom: 2.5px solid hsl(258 47% 56%);
  border-right: 2.5px solid hsl(258 47% 56%);
}
.bnto-hov-border:hover::before,
.bnto-hov-border:hover::after { width: 100%; height: 100%; }
使い方のコツ

左上と右下の角から枠線が伸びて四角を描くギミック。線の太さ（2.5px）は4か所とも同じ値に揃えてください。box-sizing: border-box を疑似要素に指定するのがズレ防止のポイントです。

もっと見る

アイコン回転

.bnto-hov-spin {
  display: inline-flex; align-items: center; gap: 9px;
  color: hsl(158 58% 38%); text-decoration: none;
}
.bnto-hov-spin .ic { display: inline-flex; align-items: center; justify-content: center;
  transition: transform .5s; transform-origin: 50% 50%; }
.bnto-hov-spin .ic svg { display: block; }
.bnto-hov-spin:hover .ic { transform: rotate(360deg); }
使い方のコツ

rotate(360deg) で一回転、90deg にすると「ちょんと回る」控えめな動きになります。文字ごと回すとうるさいので、回すのはアイコンだけにするのがコツ。SVGアイコンでも同じように動きます。

Hover Gradient

文字グラデスライド

/* #2A2622 は通常時の文字色 */
.bnto-hov-gradtext {
  font-weight: 900;
  background: linear-gradient(90deg,
    hsl(5 100% 62%), hsl(43 100% 50%) 50%, #2A2622 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position .4s;
}
.bnto-hov-gradtext:hover { background-position: 0 0; }
使い方のコツ

幅200%の背景の左半分にグラデ、右半分に通常の文字色を敷き、background-position をスライドさせる仕組み。#2A2622 の2か所をサイトの本文色に合わせて書き換えてください。見出しやナビリンクに向いています。

明るさアップ

.bnto-hov-bright {
  transition: filter .25s;
}
.bnto-hov-bright:hover { filter: brightness(1.15); }
使い方のコツ

たった2行で画像・バナー・サムネイルに使い回せる万能ホバー。brightness(0.85) にすると逆に暗くなり、白文字を重ねるUIと好相性。filter: brightness(1.1) saturate(1.2) のように組み合わせも可能です。

CSSホバーアニメーションの基礎知識

ホバーアニメーションは、マウスカーソルが乗った瞬間に色や形が変化する演出で、「ここはクリックできる」というサインをユーザーに伝える大切なUI表現です。リンクやカードが静止したままだと押せるかどうか迷わせてしまいますが、マウスオーバーで反応が返ってくるだけで操作の安心感がぐっと高まります。このページでは、コピペで使えるCSSホバーの実装例を12種類掲載しています。

仕組みはシンプルで、通常時のスタイルに transition を書き、:hover で変化後の値を指定するだけ。JavaScriptは一切不要です。CSSタブのコードをスタイルシートへ、HTMLタブのコードをページへ貼り付ければそのまま動きます。クラス名は .bnto-hov-〇〇 形式の独自プレフィックス付きなので、既存のCSSと衝突しにくい設計です。

transform + transition が基本

ホバーアニメーションの多くは transform（移動・拡大・回転）と transition の組み合わせで作れます。transform はレイアウトを再計算させずGPUで処理されるため動きが滑らかで、width や margin をアニメさせるよりパフォーマンスに優れています。下線が伸びるリンクも、幅ではなく scaleX を使うのはこのためです。

タッチデバイスでは hover が効かない

スマホやタブレットにはカーソルがないため、:hover は基本的に発火しません。ホバーが動かなくても情報が欠けないように設計し、必要なら @media (hover: hover) でホバー可能な環境だけにアニメーションを適用しましょう。

動かしすぎないのが上品に見せるコツ

UIのホバー演出は 0.2〜0.3秒 が心地よい目安。長すぎると操作がもたつき、速すぎると変化に気づけません。また1画面の中で動きの種類を増やしすぎると散らかった印象になるため、「リンクは下線」「カードは浮き上がり」のようにパーツごとにルールを決めて統一するのがおすすめです。

よくある質問

スマホやタブレットでもホバーアニメーションは動きますか？
いいえ、タッチデバイスにはマウスカーソルがないため :hover は基本的に発火しません。タップ時のフィードバックには :active を併用するか、@media (hover: hover) でホバー可能な環境だけにアニメーションを適用するのが定番です。
アニメーションの速さを変えるには？
transition の秒数（.3s など）を書き換えるだけです。UIのホバー演出は0.2〜0.3秒が心地よい目安で、長すぎると操作がもたついて感じられます。
コピーしたCSSはそのまま使えますか？
はい。CSSタブのコードをスタイルシートに、HTMLタブのコードをページに貼り付けるだけで動きます。クラス名はすべて bnto- で始まる独自プレフィックス付きなので、既存のスタイルと衝突しにくい設計です。
商用サイトで利用できますか？
はい、すべてのパーツは商用・個人を問わず無料で利用できます。登録やクレジット表記も不要です。
このページのパーツはAIコーディングツールでも使えますか？
はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「カード浮き上がり」）を伝えるだけで適用を指示できます。AIがWebを読めない場合は、「コピー」ボタンで取得したHTMLとCSSをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に表示確認することをおすすめします。

関連カテゴリ

ホバーアニメーションと組み合わせて使いやすいパーツはこちら。

ボタン カード装飾 テキストエフェクト ローディング