ホバー演出 · Hover Interaction · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Motion › Hover Interaction

ホバー演出

マウスオーバーで反応する装飾。カード、ボタン、画像。

24

Patterns

Motion

Group

isValid=0

Verified

CSS

Animation

01

Hover — 4 Animated Button Set

hover-button-set

Copy
Link

ボタン ・ ホバー演出 集

Shine →
Grow ↑
Arrow →
Sunny ☀
  • パターン名: Hover — 4 Animated Button Set
  • 概要: Four buttons with shine / grow / arrow-shift hover effects.
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 720px、主要ブロック group, heading, buttons, button, button, button, button
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hover-button-set"} /-->

CSS:
.section-hover-button-set { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-hover-button-set').forEach((el) => el.dataset.ready = 'true');

02

Hover — 3 Hover Effect Demo

hover-card-demo

Copy
Link

マウスを乗せてみてください

CSS のホバー演出 (.tf-card-hover) を 3 種類 比較

⬆

Lift

少しだけ持ち上がる、定番の演出。

✨

Shine

表面を光が斜めに走るシャイン効果。

↻

Tilt

わずかに 3D 回転する、遊び心のある演出。

  • パターン名: Hover — 3 Hover Effect Demo
  • 概要: Three card-hover effects (Lift / Shine / Tilt) demonstrating tf-card-hover variants.
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px、推奨コンテンツ幅 1080px、主要ブロック group, heading, paragraph, columns, column, group, paragraph, heading
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hover-card-demo"} /-->

CSS:
.section-hover-card-demo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-hover-card-demo').forEach((el) => el.dataset.ready = 'true');

03

Hover — 3 Image Hover Effects

hover-image-zoom

Copy
Link

画像 ・ ズーム ホバー

ズームイン

3D ティルト

フェード ・ オーバーレイ

  • パターン名: Hover — 3 Image Hover Effects
  • 概要: Three image cards with zoom / tilt / fade-overlay hover treatments.
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, heading, columns, column, group, image, paragraph, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hover-image-zoom"} /-->

CSS:
.section-hover-image-zoom { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-hover-image-zoom').forEach((el) => el.dataset.ready = 'true');

04

Hover — 4 Link Hover Styles

hover-link-styles

Copy
Link

テキスト ・ リンク ホバー

  • パターン名: Hover — 4 Link Hover Styles
  • 概要: Four inline link hover styles (underline slide / arrow grow / highlight fill / color shift).
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 640px、主要ブロック group, heading, list, list-item, list-item, list-item, list-item
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hover-link-styles"} /-->

CSS:
.section-hover-link-styles { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-hover-link-styles').forEach((el) => el.dataset.ready = 'true');

05

Hover — FX01 Card Tilt

fx-hover-tilt

Copy
Link

カードが傾く

ホバーで奥行きが生まれます。

  • パターン名: カード傾き — Hover — FX01 Card Tilt
  • 概要: ホバーでカードが3D気味に傾く
  • 適用シーン: メニュー・プランカード
  • 使い方: カードのグループに fx-hover-tilt
  • メリット: 定番の奥行き演出
  • デメリット: 多用すると酔う
  • バリエーション案: 角度は控えめ設計
  • 実装時の注意点: タッチ端末では傾かない(問題なし)
使い方: カードのグループに fx-hover-tilt
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

06

Hover — FX02 Card Lift

fx-hover-lift

Copy
Link

浮き上がるカード

ホバーで影ごと持ち上がります。

  • パターン名: カード浮上 — Hover — FX02 Card Lift
  • 概要: 影ごとふわっと持ち上がる
  • 適用シーン: 記事カード・商品カード
  • 使い方: グループに fx-hover-lift
  • メリット: クリック可能感が伝わる
  • デメリット: 重い影は下品になる
  • バリエーション案: 影の濃さ調整
  • 実装時の注意点: カード全体をリンクにすると効果的
使い方: グループに fx-hover-lift
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

07

Hover — FX03 Corner Morph

fx-hover-morph

Copy
Link

角が生きるカード

ホバーで角丸が有機的に変形。

  • パターン名: 角丸モーフ — Hover — FX03 Corner Morph
  • 概要: 角丸が有機的な形に変形する
  • 適用シーン: ビューティ・クリエイティブ系カード
  • 使い方: グループに fx-hover-morph
  • メリット: 柔らかい個性が出る
  • デメリット: 堅い業種には不向き
  • バリエーション案: 変形量の調整
  • 実装時の注意点: 背景色があると変形が見える
使い方: グループに fx-hover-morph
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

08

Hover — FX04 Hologram

fx-hover-holo

Copy
Link

ホログラム質感

ホバーで玉虫色の光が流れます。

  • パターン名: ホログラム — Hover — FX04 Hologram
  • 概要: 玉虫色の光沢が流れる
  • 適用シーン: 限定・プレミアム訴求
  • 使い方: 暗色グループに fx-hover-holo
  • メリット: 特別感の演出に最適
  • デメリット: 明るい背景では効きにくい
  • バリエーション案: 光の角度変更
  • 実装時の注意点: 暗背景+白文字推奨
使い方: 暗色グループに fx-hover-holo
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

09

Hover — FX05 Bounce

fx-hover-bounce

Copy
Link

弾むカード

ホバーでぽんっと弾みます。

  • パターン名: 弾み — Hover — FX05 Bounce
  • 概要: ぽんっと弾んで反応する
  • 適用シーン: バッジ・アイコン・小カード
  • 使い方: グループに fx-hover-bounce
  • メリット: 愛嬌のある反応
  • デメリット: 大きい要素だと騒がしい
  • バリエーション案: 弾み量の調整
  • 実装時の注意点: 小さめ要素向け
使い方: グループに fx-hover-bounce
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

10

Hover — FX06 Image Zoom

fx-hover-zoom

Copy
Link
ズームする写真
  • パターン名: 画像ズーム — Hover — FX06 Image Zoom
  • 概要: 枠内で写真がゆっくり寄る
  • 適用シーン: ギャラリー・ブログサムネ
  • 使い方: グループに fx-hover-zoom(中に画像)
  • メリット: 最も汎用的な画像ホバー
  • デメリット: –
  • バリエーション案: 寄り速度・倍率
  • 実装時の注意点: 枠がクロップするので構図に余裕を
使い方: グループに fx-hover-zoom(中に画像)
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

11

Hover — FX07 Color In

fx-hover-color

Copy
Link
モノクロ→カラー
  • パターン名: モノクロ→カラー — Hover — FX07 Color In
  • 概要: ホバーで彩度が戻る
  • 適用シーン: 実績一覧・スタッフ写真
  • 使い方: 画像ブロックに fx-hover-color
  • メリット: 一覧の統一感と選択感の両立
  • デメリット: 常時カラーで見せたい写真には不向き
  • バリエーション案: セピア版など
  • 実装時の注意点: 一覧全部に付けると効果大
使い方: 画像ブロックに fx-hover-color
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

12

Hover — FX08 Sharpen

fx-hover-sharpen

Copy
Link
ボケ→シャープ
  • パターン名: ボケ→シャープ — Hover — FX08 Sharpen
  • 概要: ぼけた写真がホバーで結像する
  • 適用シーン: ティザー・ネタバレ防止
  • 使い方: 画像ブロックに fx-hover-sharpen
  • メリット: 「見たい」を誘発する
  • デメリット: 常時ボケは情報が伝わらない
  • バリエーション案: ボケ量調整
  • 実装時の注意点: 重要情報は画像外にも書く
使い方: 画像ブロックに fx-hover-sharpen
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

13

Hover — FX09 Blob Mask

fx-hover-blob-mask

Copy
Link
有機マスク
  • パターン名: 有機マスク — Hover — FX09 Blob Mask
  • 概要: ホバーで写真の輪郭が有機形に変わる
  • 適用シーン: ビューティ・キッズ系
  • 使い方: グループに fx-hover-blob-mask(中に画像)
  • メリット: 柔らかい世界観が出る
  • デメリット: 四隅の情報が欠ける
  • バリエーション案: 形状バリエーション
  • 実装時の注意点: 被写体中央の写真向け
使い方: グループに fx-hover-blob-mask(中に画像)
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

14

Hover — FX10 Caption Rise

fx-hover-reveal-caption

Copy
Link
キャプション付き写真

京町家の路地 — ホバーで現れる説明文。ここは普通の段落として編集できます。

  • パターン名: キャプションせり上がり — Hover — FX10 Caption Rise
  • 概要: 写真の下から説明文がせり上がる
  • 適用シーン: ギャラリー・作品集・スタッフ紹介
  • 使い方: グループに fx-hover-reveal-caption(中に画像+段落)。段落がそのままキャプション
  • メリット: 説明文は通常の段落=編集自由
  • デメリット: 長文キャプションは不向き
  • バリエーション案: 背景色・出る方向
  • 実装時の注意点: タッチ端末では常時表示に自動切替
使い方: グループに fx-hover-reveal-caption(中に画像+段落)。段落がそのままキャプション
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

15

Hover — FX11 Button Fill

fx-hover-fill

Copy
Link
満ちるボタン
  • パターン名: ボタン充填 — Hover — FX11 Button Fill
  • 概要: アウトラインボタンが下から満ちる
  • 適用シーン: CTA・予約ボタン
  • 使い方: ボタンに fx-hover-fill(アウトラインスタイル推奨)
  • メリット: 反応が明快
  • デメリット: –
  • バリエーション案: 満ちる方向
  • 実装時の注意点: アウトライン+アクセント色で映える
使い方: ボタンに fx-hover-fill(アウトラインスタイル推奨)
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

16

Hover — FX12 Shine Sweep

fx-hover-shine

Copy
Link

シャインが走る

  • パターン名: シャイン走査 — Hover — FX12 Shine Sweep
  • 概要: 光の帯が横切る
  • 適用シーン: バナー・帯・カード
  • 使い方: グループに fx-hover-shine
  • メリット: 高級感のある反応
  • デメリット: 明るい背景では見えにくい
  • バリエーション案: 光の幅・速度
  • 実装時の注意点: 暗色背景推奨
使い方: グループに fx-hover-shine
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

17

Hover — FX13 Glow Ring

fx-hover-glow-spin

Copy
Link
光輪が回る
  • パターン名: 光輪回転 — Hover — FX13 Glow Ring
  • 概要: ボタンの周囲を光輪が回る
  • 適用シーン: メインCTAの強調
  • 使い方: ボタンを包むグループに fx-hover-glow-spin
  • メリット: 視線誘導力が強い
  • デメリット: 多用すると安っぽい
  • バリエーション案: 光の色
  • 実装時の注意点: 1ページ1箇所まで推奨
使い方: ボタンを包むグループに fx-hover-glow-spin
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

18

Hover — FX14 Particle Burst

fx-hover-burst

Copy
Link
パーティクル
  • パターン名: パーティクル — Hover — FX14 Particle Burst
  • 概要: ホバーで粒が弾ける
  • 適用シーン: キャンペーンボタン
  • 使い方: ボタンに fx-hover-burst
  • メリット: 楽しさの演出
  • デメリット: 落ち着いた業種に不向き
  • バリエーション案: 粒の数・色
  • 実装時の注意点: –
使い方: ボタンに fx-hover-burst
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

19

Hover — FX15 Press

fx-press

Copy
Link
押し込むボタン
  • パターン名: 押し込み(クリック) — Hover — FX15 Press
  • 概要: クリック時に沈む(:active)
  • 適用シーン: 全ボタン共通の押し心地
  • 使い方: ボタンに fx-press
  • メリット: 触感が生まれる
  • デメリット: –
  • バリエーション案: –
  • 実装時の注意点: ホバーではなくクリック時の効果
使い方: ボタンに fx-press
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

20

Hover — FX16 Depth Sink

fx-hover-depth

Copy
Link
沈むボタン
  • パターン名: 沈み込み — Hover — FX16 Depth Sink
  • 概要: ホバーで沈み内影がつく
  • 適用シーン: 設定・二次ボタン
  • 使い方: ボタン(または要素)に fx-hover-depth
  • メリット: pressのホバー版・落ち着いた反応
  • デメリット: 主役CTAには地味
  • バリエーション案: 沈み量
  • 実装時の注意点: –
使い方: ボタン(または要素)に fx-hover-depth
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

21

Hover — FX17 Link Underline

fx-link-slide

Copy
Link

下線が伸びるリンク

  • パターン名: 下線スライド — Hover — FX17 Link Underline
  • 概要: 下線が左から伸びる
  • 適用シーン: 本文リンク・ナビ
  • 使い方: 段落に fx-link-slide(中のリンクに効く)
  • メリット: 上品な定番
  • デメリット: –
  • バリエーション案: 色変更
  • 実装時の注意点: –
使い方: 段落に fx-link-slide(中のリンクに効く)
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

22

Hover — FX18 Arrow Slide

fx-hover-arrow

Copy
Link

矢印が滑るリンク →

  • パターン名: 矢印スライド — Hover — FX18 Arrow Slide
  • 概要: 矢印が右へ滑る
  • 適用シーン: 「詳しく見る」リンク
  • 使い方: 段落に fx-hover-arrow(文末に→を書く)
  • メリット: 進む方向を示せる
  • デメリット: 矢印文字が必要
  • バリエーション案: –
  • 実装時の注意点: –
使い方: 段落に fx-hover-arrow(文末に→を書く)
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

23

Hover — FX19 Sparkle

fx-hover-sparkle

Copy
Link

きらめくカード

ホバーで小さな星が瞬きます。

  • パターン名: きらめき — Hover — FX19 Sparkle
  • 概要: 小さな星がまたたく
  • 適用シーン: ギフト・特典カード
  • 使い方: グループに fx-hover-sparkle
  • メリット: 華やかさを足せる
  • デメリット: ビジネス系に不向き
  • バリエーション案: 星の数
  • 実装時の注意点: –
使い方: グループに fx-hover-sparkle
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2

24

Hover — FX20 Wave Underline

fx-hover-wave-line

Copy
Link

波打つ下線のリンク

  • パターン名: 波下線 — Hover — FX20 Wave Underline
  • 概要: 手書き風の波線が伸びる
  • 適用シーン: カジュアル・キッズ・カフェ系リンク
  • 使い方: 段落に fx-hover-wave-line(中のリンクに効く)
  • メリット: 遊び心と可読性の両立
  • デメリット: フォーマルには不向き
  • バリエーション案: 波の色(SVG内%23d97b4a)
  • 実装時の注意点: キーボードフォーカスでも出る
使い方: 段落に fx-hover-wave-line(中のリンクに効く)
検証: isValid 0 / 強制ホバー+実ホバー確認 / fx.css v7.2