パーツ番号 06-02-05 ・ CSSのみ

関連記事カード横並び

グラデのサムネと2行省略タイトルを持つカードを横並びに。ホバーでサムネがズームします。WordPress記事下の関連記事表示に。ホバーで動作します。

bloghovercss

プレビュー

ソースコード

HTML

<div class="d06-02-05-grid">
          <a href="#" class="d06-02-05-card">
            <span class="d06-02-05-thumb d06-02-05-t1"></span>
            <span class="d06-02-05-body"><span class="d06-02-05-cat">TIPS</span><span class="d06-02-05-tt">初心者でも失敗しない記事構成の作り方入門ガイド</span></span>
          </a>
          <a href="#" class="d06-02-05-card">
            <span class="d06-02-05-thumb d06-02-05-t2"></span>
            <span class="d06-02-05-body"><span class="d06-02-05-cat">SEO</span><span class="d06-02-05-tt">検索順位を上げるために今日からできる5つの施策</span></span>
          </a>
        </div>

CSS

.prev.d06-02-05{background:#f4f5fa}
        .d06-02-05-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
        .d06-02-05-card{display:block;background:#fff;border-radius:12px;overflow:hidden;text-decoration:none;
          box-shadow:0 4px 12px rgba(40,50,90,.08);transition:transform .3s,box-shadow .3s}
        .d06-02-05-card:hover{transform:translateY(-5px);box-shadow:0 14px 26px rgba(40,50,90,.15)}
        .d06-02-05-thumb{display:block;height:82px;transform:scale(1);transition:transform .45s ease}
        .d06-02-05-card:hover .d06-02-05-thumb{transform:scale(1.12)}
        .d06-02-05-t1{background:linear-gradient(135deg,#4f7cf7,#38bdf8)}
        .d06-02-05-t2{background:linear-gradient(135deg,#f6863e,#f24b6a)}
        .d06-02-05-body{display:block;padding:10px 12px 14px}
        .d06-02-05-cat{display:inline-block;font-size:9px;font-weight:700;color:#5b3df0;background:#eceaff;padding:2px 7px;border-radius:10px;margin-bottom:6px}
        .d06-02-05-tt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
          font-size:12px;line-height:1.5;color:#2a3042;font-weight:600}

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