• 操作
  • エリアホバー

#area hover 012

ホバー時にエリア背景色が薄くなる

参考サイトURL
動きの解説

ホバーしたエリアの背景色が透けたり薄くなったりする動きは、コンテンツに軽やかさを与え、「押せる」ことを控えめに伝えます。写真の上に文字が乗るカードUIなどで、画像の視認性を高めつつインタラクションを成立させる実用的な手法です。実装はopacityを下げるか、背景色のアルファ値(透明度)を変更します。注意点として、opacityを親要素全体にかけると中のテキストまで薄くなって読みづらくなるため、背景色のみ(RGBAのA値や擬似要素の背景)を変更するのがセオリーです。