Stitched Edge Travel CTA
旅の予約ボタンを囲う破線ステッチがスライドし、目的地タグが横から現れる。旅行・イベント向け。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
300 items条件に一致する公開素材
Bilingual Line Switch
日英併記のリンクをホバーすると補助訳が整列して現れ、主言語の下線と連動する表現。
Citation Margin Capsule
記事本文の文献番号に触れると、狭い余白から出典の短い要約が横に開く。本文の流れを崩さない。
Photo Contact Strip Lift
横並び写真の一枚をホバーすると上方向へ持ち上がり、作品名と日付ラベルが現れるギャラリー演出。
Embossed Label Press
白いラベルを押し込むように沈ませ、文字と凹凸の陰影が反転するホバー。落ち着いた企業サイト向け。
Material Sample Envelope
カタログの素材見本に触れると紙のスリーブから色見本が持ち上がり、材質名が表示されるカード。
Assurance Checklist Panel
サービスのチェックポイントにホバーすると、左端の認証ラインと補足内容が順に開く信頼訴求カード。
Tiled Panorama Contrast
同じ風景を3枚の切片に分け、ホバーした切片だけ鮮やかになり、細いインデックス線が現れる。
Museum Exhibit Menu
展示案内の各リンクに触れると矢印と展示番号が別方向から現れる、ミュージアム向けのナビ。
Article Topic Rail
記事目次のセクションリンクをホバーすると右端の読了目安と区切り線が現れ、現在位置を探しやすくする。
Data Row Delta Trail
数値表の行にホバーすると前月比が右側に現れ、数値の変化を読み取りやすくするレポート用表示。
Expand-to-Label Icon
アイコンのみのコンパクトな操作ボタンがホバーで横に伸び、操作名を表示する省スペース表現。
Offset Badge Toggle
角に重なる数字バッジが半回転し、メインボタンの二層プレートが逆方向にずれるホバー。
Variable Weight Echo
見出しの複製レイヤーが少しずれて現れ、活字の太さが変わったように見せるタイポグラフィホバー。
Caption Bracket Link
記事見出しにカーソルを乗せると、左右の括弧が開き、文脈を補う短いキャプションが下から現れる。
Picture-in-Picture Material
商品画像の右上に素材の質感を拡大した小窓が現れ、ディテールを確認できるホバー。
Barcode Scan Ticket
チケット購入の導線で、バーコード上を走査線が横切り、右端の入場矢印が出現するホバー。
KPI Heat Tile Detail
数値カードの小さなヒートマップが順に色づき、データの注目セルと補足値を提示するホバー。