Neighbor-Dim Navigation
メニュー項目をホバーすると隣接項目が静かに薄まり、アクティブな項目だけにラインが伸びる。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：動き: slide
121 items条件に一致する公開素材
Context Preview Rail
メニューの各リンクに触れると、右側の共通レールにその項目固有のプレビュー情報が切り替わる。
Stack Fan Icon
重なった3枚のダイヤ形レイヤーがホバーで扇状に広がり、素材レイヤー切替を示すアイコン。
Sliding Latch CTA
鍵のスライド解除を模した二段階ボタン。会員入口や予約開始への誘導に使えるホバー。
Layered Report Card
レポートの見出しを保ちながら、2枚のデータシートが少しずつずれて見える調査レポートカード。
Shortcut Hint Navigation
メニューの末尾にショートカットキーのヒントがせり出す、管理画面向けナビゲーション。
Notched Document CTA
角の切り欠きに書類アイコンが収まり、ホバーで資料の受け取り動作を示すダウンロードボタン。
Offset Capsule Slider
二重のカプセル輪郭が逆方向にずれ、中央の申込ボタンを軽やかに際立たせる演出。
Stacked Testimonial Sheets
お客様の声カードの背後にある紙が左右へずれ、複数のレビューがあることを示す演出。
Tabular Chapter Nav
章番号と見出しが上下のラインで切り替わる、編集記事のセクション移動ナビゲーション。
Inline Map Marker Links
会社案内の拠点リンクにホバーすると小さなピンと距離メモが展開するナビゲーション。
Split-Pill Direction CTA
左右に分かれたピル形ボタンがホバー時に展開し、行き先を示す矢印が前へ移動します。
Pagination Leaf Turn
ページ番号が小さくめくれるように切り替わる、記事一覧やギャラリー用ページ送り。
Caption Baseline Ladder
短い見出し下の3本の細線が順番に伸び、編集記事やコンテンツリンクの入口を印象づけます。
Agenda Panel Elevation
イベントの日時カードにマウスを乗せると会場案内が下から現れ、詳細ページの入口を明確にします。
Dot-To-Label Nav
縦に並ぶ小さなドットがホバー時に短い見出しへ展開する、ページ内ナビゲーション用のUI。
Sliding Measurement CTA
計測目盛りが伸び、数値が更新されたように見える設計資料向けCTA。
Inline Glossary Rail
専門用語のリンクにホバーすると横に定義ラベルが滑り出す、技術記事向け表現。