Palette Unfold Portfolio Card
作品紹介カードの下から配色チップとHEXコードが段階的に現れる、デザイン実績向けUI。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：技術: css
300 items条件に一致する公開素材
Halftone Veil Photograph
画像を覆うドット状の網点がホバーで横へ流れ、画像の細部がすっきり現れる。
Radial Nav Backplate
ナビゲーション項目の左側から円形の背景が広がり、見出しを浮かび上がらせるホバー。
Inline Map Marker Links
会社案内の拠点リンクにホバーすると小さなピンと距離メモが展開するナビゲーション。
Threshold Progress Detail
達成率バーにホバーすると基準値ライン・到達値・補足説明が表示されるダッシュボード用UI。
Arrow Turnstile Icon
アイコン内のカーブ矢印がホバーで直進矢印に変化する、外部ページ遷移用の小型リンク。
Ribbon Price Action
購入・申込ボタンの端から小さな価格リボンが現れ、ホバー時だけ補足情報を示します。
Split-Pill Direction CTA
左右に分かれたピル形ボタンがホバー時に展開し、行き先を示す矢印が前へ移動します。
Pagination Leaf Turn
ページ番号が小さくめくれるように切り替わる、記事一覧やギャラリー用ページ送り。
Headline Shadow Extrusion
見出し文字の後方に段階的な色の影が生まれ、紙を重ねたような立体感を与えます。
Caption Baseline Ladder
短い見出し下の3本の細線が順番に伸び、編集記事やコンテンツリンクの入口を印象づけます。
Color-Band Photo Scan
モノクロ写真が5つの縦帯に分かれて順番にカラーへ戻る、作品一覧向けのホバー演出。
Travel-Stamp Photo Frame
画像の角に旅のスタンプが回転して現れ、旅行記や観光サイトの写真に情報を添えます。
Agenda Panel Elevation
イベントの日時カードにマウスを乗せると会場案内が下から現れ、詳細ページの入口を明確にします。
Product Material Swatch
商品紹介カードの素材サンプルがホバーでめくれ、裏面に質感や材質を表示します。
Dot-To-Label Nav
縦に並ぶ小さなドットがホバー時に短い見出しへ展開する、ページ内ナビゲーション用のUI。
Signal Bars Response
通信状態などの4本のバーがホバーで順番に立ち上がる、ダッシュボード向けの小型アイコン。
Removable Filter Tag
検索・絞り込み条件のチップにホバーすると削除用アイコンが現れ、操作対象が明確になります。