カード型レイアウトの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行目のtransformでtranslateY(-5px)を指定することでY軸に対し-5px移動します。

画像の回転と拡大

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

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

---

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