カード型レイアウトの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. Chrome拡張機能を見直してみた

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

  2. いざという時に使える13のHTML&CSS Tips集の画像

    いざという時に使える13のHTML&CSS Tips集

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

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

  4. 見出しをおしゃれにする英字フォントの画像

    【無料】見出しをおしゃれにする英字フォントを19個集めてみた

  5. 見出しに使えるfit-contentを解説してみる