パーツ番号 05-01-01 ・ CSSのみ

ホバーリフトカード

ホバーでカードが浮き上がり、影が深くなる定番の動き。WordPressの記事一覧やサービス紹介グリッドに最適です。

hovercss

プレビュー

ソースコード

HTML

<div class="card05-01-01">
          <div class="thumb05-01-01"></div>
          <div class="body05-01-01">
            <h4>春の京都を歩く旅</h4>
            <p>桜の名所を巡る2泊3日のモデルコースをご紹介します。</p>
          </div>
        </div>

CSS

.prev.d05-01-01{background:#f1f2f5}
        .d05-01-01 .card05-01-01{
          width:220px;background:#fff;border-radius:12px;overflow:hidden;
          box-shadow:0 2px 6px rgba(20,25,40,.10);
          transition:transform .3s ease,box-shadow .3s ease;
          cursor:pointer;
        }
        .d05-01-01 .card05-01-01:hover{
          transform:translateY(-8px);
          box-shadow:0 18px 32px rgba(20,25,40,.22);
        }
        .d05-01-01 .thumb05-01-01{
          height:110px;
          background:
            radial-gradient(circle at 75% 25%, rgba(255,255,255,.55) 0 18px, transparent 19px),
            linear-gradient(160deg,#f8b5c4 0%,#e88aa0 45%,#7f9ec9 100%);
        }
        .d05-01-01 .body05-01-01{padding:14px 16px 18px}
        .d05-01-01 .body05-01-01 h4{margin:0 0 6px;font-size:14px;color:#222;line-height:1.4}
        .d05-01-01 .body05-01-01 p{margin:0;font-size:11px;color:#777;line-height:1.6}

クラス名 .d05-01-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。