Offset Badge Toggle
角に重なる数字バッジが半回転し、メインボタンの二層プレートが逆方向にずれるホバー。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：用途: portfolio
69 items条件に一致する公開素材
Variable Weight Echo
見出しの複製レイヤーが少しずれて現れ、活字の太さが変わったように見せるタイポグラフィホバー。
Building Section Hotspots
建築案件カードにホバーすると、各階の役割と寸法線が図面のように現れる。
Soft Polygon Window
写真の角を柔らかい多角形に変形し、フレームの外周から作品番号を現すホバー。
Context Preview Rail
メニューの各リンクに触れると、右側の共通レールにその項目固有のプレビュー情報が切り替わる。
Panorama Slice Parallax
1枚の風景を3つの短冊に切り分け、ホバーすると各パネルが奥行きを変えてずれる画像演出。
Folded Photo Index
写真の右下隅が紙のように折れ、作品番号と補足情報が現れるポートフォリオ用画像ホバー。
Technical Grid Registration
作品写真の上に建築図面のような十字線・寸法メモが順に現れる、建築実績向け画像ホバー。
Crop-Shift Portfolio Frame
画像の枠は固定したまま、ホバー時だけ写真の見せる範囲を横方向へ移動する作品カード。
Palette Unfold Portfolio Card
作品紹介カードの下から配色チップとHEXコードが段階的に現れる、デザイン実績向けUI。
Color-Band Photo Scan
モノクロ写真が5つの縦帯に分かれて順番にカラーへ戻る、作品一覧向けのホバー演出。
Sliding Measurement CTA
計測目盛りが伸び、数値が更新されたように見える設計資料向けCTA。
Selective Blur Gallery
写真をぼかしながら中央の円形窓だけを鮮明に残す、ギャラリーの注目誘導。
Project Receipt Pullout
実績カードの下から成果情報を記載したレシート風パネルが引き出される。
Photo Coordinate Overlay
画像にカーソルを乗せると構図の測定線と撮影情報が現れる、建築・作品紹介向け。
Stacked Destination Menu
ナビ項目の裏に重なった行き先ラベルがホバー時に段差を付けて現れる。
Vertical Shutter Photograph
縦型の細いシャッターが順に開き、背面の別ビジュアルを見せる画像ホバー。
Foreground Depth Portrait
人物のシルエットが背景の図形から手前に浮き出し、奥行きの差で人物紹介を強調。