Split Offset Headline
同じ見出しの上下半分が左右にずれ、文字を変更せずに奥行きのあるホバーを作る。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：用途: portfolio
69 items条件に一致する公開素材
Polaroid Note Lift
写真プリントが少し回転して持ち上がると、下に隠れた撮影メモが顔を出す。
Alternating Word Window
横長の文字窓の中で英単語が縦に入れ替わる。見出しの幅を動かさずテキストを演出。
Checkerboard Image Peel
9枚の小窓が順番に開き、背面の別配色のビジュアルを格子状に見せる。
Editorial Reference Strip
事例カードの細い右端レールがホバーで開き、案件情報とカテゴリーが表示される。
Outline to Ink
線だけの大型英字がホバーで塗りつぶされ、背景のアクセント線も伸びる見出し演出。
Duotone Photo Wash
ホバーで暖色のデュオトーンを外し、元の写真の自然な色を段階的に現すギャラリーカード。
Layered Project Index
ポートフォリオのプロジェクトカードがホバーで少しずれ、重なっていた番号札とカテゴリを見せる。
Word Cascade Hover
3つの単語が少しずつ時間差で持ち上がり、ポートフォリオの見出しにリズムを与える。
Focus Aperture Image
画像の中央から円形の光が大きく広がり、暗い写真のディテールを浮かび上がらせる。
Photo Metadata Rail
作品画像の右端から縦書きメタ情報のレールが現れ、写真の上に余計な文字を重ねずに案内できる。
Layered Case Study Card
実績カードの背景パネルが横へずれ、写真と概要の奥行きを演出する立体ホバー。
Ghost Title Navigation
ナビゲーションの背後に大きな英語ラベルが淡く浮かび、見出しを視覚的に誘導する。
Menu Thumbnail Cue
ナビゲーション項目にホバーすると、その横へ小さな作品サムネイルが現れ、行き先を予告する。
Diagonal Image Reveal
斜め方向にマスクが開き、写真の上に作品カテゴリーと詳細リンクが現れる。
Inset Image Matte
画像の四辺から余白が現れ、内側にタイトルフレームが浮かぶギャラリーホバー。
Corner Number Lift
サービスカードの番号札が外へ持ち上がり、見出しラインが伸びる。
Segmented Nav Ribbon
横並びのナビゲーションで選択項目だけに短い帯が伸びるタブ風ホバー。