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

更新日 : 2021.04.04

カード型レイアウトのhoverデザイン
Share
1
0
8
ブログ記事一覧だけでなくサービス紹介の一覧など、カード型レイアウトで使える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. 【保存版】CSSのみのボタンデザイン!私が現場で使ってきたボタンアイデア30選の画像

    【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選

  2. 現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介しますの画像

    現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します

  3. Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

    Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

  4. CSS見出しデザイン21スタイル - シンプルな見出しデザインをご紹介の画像

    CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介

  5. ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装するの画像

    CSSのみで実装するボタン、テキストリンク、hoverスタイル19選