Punch Card Perforation
半券風のボタンの切り取り線がホバーで強調され、右側のチェックマークが浮かぶ。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
300 items条件に一致する公開素材
Typographic Side Index
記事リンクにホバーすると、大きな番号が横から滑り込み、見出しの区切り線が伸びる。
Alternating Word Window
横長の文字窓の中で英単語が縦に入れ替わる。見出しの幅を動かさずテキストを演出。
Film Contact Sheet
写真のホバーでコンタクトシートの縁とフィルム番号が現れる、作品一覧向けサムネイル。
Checkerboard Image Peel
9枚の小窓が順番に開き、背面の別配色のビジュアルを格子状に見せる。
Route Line Story Card
旅程カード内の2地点を結ぶ経路線がホバーで描画され、到着地点が強調される。
Double Gate Reveal
ボタンの二枚のシャッターが上下に開き、中央のアクセント帯と矢印が現れる。
Editorial Reference Strip
事例カードの細い右端レールがホバーで開き、案件情報とカテゴリーが表示される。
Crosshair Navigation Mark
メニュー項目の四隅から短いクロスヘア線が入り、現在注目している項目を示す。
Woven Category Link
カテゴリーリンクの2本の斜線が織り込むように交差し、タグのアクセント模様になる。
Specification Callout Rail
製品スペック一覧でホバー項目だけに左の色帯と補足単位が現れ、データを追いやすくする。
Plus to Four Points
展開ボタンのプラス記号がホバーで4つの点へ分かれ、メニューの開閉を視覚的に示す。
Download Label Split
ダウンロードボタンの右側が開き、ファイル形式と矢印が現れる。資料配布で役立つ演出。
Outline to Ink
線だけの大型英字がホバーで塗りつぶされ、背景のアクセント線も伸びる見出し演出。
Margin Note Reveal
記事の見出し横に隠れた補足ラベルが現れる、エディトリアルデザイン向けリンク。
Panoramic Photo Shift
横長写真の表示窓がホバーで右へ移動し、隠れていた風景と撮影情報を見せる。
Duotone Photo Wash
ホバーで暖色のデュオトーンを外し、元の写真の自然な色を段階的に現すギャラリーカード。
Prism Edge CTA
ホバーした瞬間に多色の輪郭が巡る、落ち着いたダーク系CTA。通常時は控えめな細い枠です。