Submenu Peek
ホバーまたはキーボード操作で小さなサブメニューが展開する、実務向けのナビゲーション。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
300 items条件に一致する公開素材
Image Curtain Split
画像を覆う2枚のカーテンが左右へ開くビジュアル演出。
Perspective Photo Tilt
画像カードが遠近感を伴い少しだけ傾く、控えめな立体ホバー。
Card Spotlight
カード背景に柔らかなスポットライトが現れ、見出しとアクセント色が変化。
Floating Label Field
入力欄へのホバー・フォーカスで枠が変化し、ラベルが上へ移動する実用フォーム。
Elastic Chevron
小さな矢印が伸び縮みして前進する、案内リンク向けのマイクロアニメーション。
Arrow Pass Through
丸い矢印アイコンが一度外へ抜け、反対側から現れるCTA演出。
Dual-Line Text Flip
文字が上へ抜けると同じ文字が下から入る、行単位の入れ替え演出。
Center Underline Expand
文字下のラインが中央から両側へ伸びるナビゲーション用ホバー。
Nav Background Wipe
メニュー文字の背後にカラー帯が下からせり上がるナビゲーション。
Image Color Restore
モノクロ写真からカラーへ移行する、制作実績・ギャラリー向けの演出。
Image Directional Pan
写真を拡大せず、窓枠の中で横方向にゆっくり移動させる画像演出。
Image Info Overlay
画像全体に半透明の情報レイヤーが現れ、タイトルと補足を表示。
Card Elevation
カード全体がわずかに浮き、影が深くなるサービス一覧向けの演出。
Card Content Reveal
タイトルだけのカードから、説明テキストが下から現れる情報追加型ホバー。
Corner Border Sweep
四隅から細い線が伸びて枠を完成させる、控えめなCTAホバー。
Navigation Focus Pill
背景の丸いハイライトが広がり、テキストリンクを柔らかく強調。
Icon Quarter Turn
矢印アイコンを円形の中で90度回転させ、方向転換を示す演出。