Tandem Word Highlight
見出しの3語が異なる方向から色面に押し出され、ホバー時に一斉に強調される。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：動き: color
51 items条件に一致する公開素材
Parcel Journey Card
配送状況を示す3つの工程アイコンがホバー時に順番に点灯する。
Ink Wash Text Mask
文字の内部だけをインクが左から満たすように変色。見出しや強調リンクに利用。
Tiled Panorama Contrast
同じ風景を3枚の切片に分け、ホバーした切片だけ鮮やかになり、細いインデックス線が現れる。
Article Topic Rail
記事目次のセクションリンクをホバーすると右端の読了目安と区切り線が現れ、現在位置を探しやすくする。
Variable Weight Echo
見出しの複製レイヤーが少しずれて現れ、活字の太さが変わったように見せるタイポグラフィホバー。
KPI Heat Tile Detail
数値カードの小さなヒートマップが順に色づき、データの注目セルと補足値を提示するホバー。
Neighbor-Dim Navigation
メニュー項目をホバーすると隣接項目が静かに薄まり、アクティブな項目だけにラインが伸びる。
Sortable Header Guide
表の列見出しにホバーすると、並び替え操作を示す矢印と列全体のガイドが現れる。表示専用のUIデモ。
Step Indicator Button
CTAの下にある3段階のステップ目盛りが順番に点灯し、次の工程を視覚的に伝えるボタン。
Bookmark Ribbon Emblem
ブックマークのリボンが折り返されたように変化し、保存操作への導線を目立たせるホバー。
Color-Band Photo Scan
モノクロ写真が5つの縦帯に分かれて順番にカラーへ戻る、作品一覧向けのホバー演出。
Route Line Story Card
旅程カード内の2地点を結ぶ経路線がホバーで描画され、到着地点が強調される。
Specification Callout Rail
製品スペック一覧でホバー項目だけに左の色帯と補足単位が現れ、データを追いやすくする。
Outline to Ink
線だけの大型英字がホバーで塗りつぶされ、背景のアクセント線も伸びる見出し演出。
Duotone Photo Wash
ホバーで暖色のデュオトーンを外し、元の写真の自然な色を段階的に現すギャラリーカード。
Prism Edge CTA
ホバーした瞬間に多色の輪郭が巡る、落ち着いたダーク系CTA。通常時は控えめな細い枠です。
Editorial Marker Stroke
記事タイトルの単語の下に、マーカーで線を引くようなハイライトが左から現れる。