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

更新日 : 2021.04.04

カード型レイアウトのhoverデザイン
Share
ブログ記事一覧だけでなくサービス紹介の一覧など、カード型レイアウトで使える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デザインだけでは分かりづらい場合もあるので、その場合は複数組み合わると変化が分かりやすくなります。変化の濃度を調整しながらユーザーが使いやすいカード型レイアウトをデザインしてみてください。

人気記事

  1. Chrome拡張機能を見直してみた

    便利なChrome拡張機能を見直してみた

  2. ジュンク堂書店池袋本店の選書フェア

    ジュンク堂書店池袋本店の選書フェアで選んだ34冊の中から9冊を紹介してみる

  3. 著書「現場で使えるWebデザインアイデアレシピ」を執筆しましたの画像

    著書「現場で使えるWebデザインアイデアレシピ」を執筆しました

  4. 2022年版 Web制作が捗るChrome拡張機能14選

    2022年版 Web制作が捗るChrome拡張機能14選

  5. 2021年を振り返る!Web制作関連の人気記事をあつめてみた