カード型レイアウトのhoverデザイン

更新日 : 2021.04.04

カード型レイアウトのhoverデザイン
ブログ記事一覧だけでなくサービス紹介の一覧など、カード型レイアウトで使えるhoverデザインをご紹介します。安易に半透明にすることなく、クリックできることを伝えるようにしましょう。

背景色の変更

See the Pen
LYbapbN
by Kobayashi (@Pulp_Kobayashi)
on CodePen.

11行目のbackground-colorで背景色を変更、12行目のbox-shadowで影の色を薄くしています。

カードの移動

See the Pen
Card Hover Style
by Kobayashi (@Pulp_Kobayashi)
on CodePen.

11行目のtransformtranslateY(-5px)を指定することでY軸に対し-5px移動します。

画像の回転と拡大

See the Pen
XWNGmgW
by Kobayashi (@Pulp_Kobayashi)
on CodePen.

13行目のtransformrotate(-5deg)で回転、scale(1.2)で拡大させています。


デザインによってはこのhoverデザインだけでは分かりづらい場合もあるので、その場合は複数組み合わると変化が分かりやすくなります。変化の濃度を調整しながらユーザーが使いやすいカード型レイアウトをデザインしてみてください。