• 操作
  • 画像ホバー

#image hover 003

薄い背景色とテキストが出現

参考サイトURL
動きの解説

画像の上に半透明のカラーレイヤーとテキストが重なる動きは、ギャラリーサイトの定番UIです。通常時は写真を美しく見せ、ホバー時のみタイトルや詳細情報を出すことで、情報のノイズを減らしてビジュアルを優先できます。背景色の透明度(alpha値)が低すぎると文字が読みづらくなるため、コントラスト比の確保が必須です。また、テキストを下からふわっと浮き上がらせるなど、出現に微細な動きを加えることで、唐突さを消し、上品な印象に仕上げることができます。