- 操作
- 画像ホバー
#image hover 003
薄い背景色とテキストが出現
- 参考サイトURL
-
- 株式会社スギヤマゲンhttps://www.sugiyama-gen.co.jp/
- 動きの解説
-
画像の上に半透明のカラーレイヤーとテキストが重なる動きは、ギャラリーサイトの定番UIです。通常時は写真を美しく見せ、ホバー時のみタイトルや詳細情報を出すことで、情報のノイズを減らしてビジュアルを優先できます。背景色の透明度(alpha値)が低すぎると文字が読みづらくなるため、コントラスト比の確保が必須です。また、テキストを下からふわっと浮き上がらせるなど、出現に微細な動きを加えることで、唐突さを消し、上品な印象に仕上げることができます。