画像ズームカード

<div class="card05-01-02">
          <div class="frame05-01-02"><div class="img05-01-02"></div><span class="zoom05-01-02">読む &rarr;</span></div>
          <div class="body05-01-02">
            <h4>自家焙煎コーヒーの淹れ方</h4>
            <p>2026.06.18</p>
          </div>
        </div>

.prev.d05-01-02{background:#f1f2f5}
        .d05-01-02 .card05-01-02{
          width:220px;background:#fff;border-radius:12px;overflow:hidden;
          box-shadow:0 4px 12px rgba(20,25,40,.12);cursor:pointer;
        }
        .d05-01-02 .frame05-01-02{position:relative;height:120px;overflow:hidden}
        .d05-01-02 .img05-01-02{
          position:absolute;inset:0;
          background:
            radial-gradient(circle at 30% 70%, rgba(255,255,255,.35) 0 24px, transparent 25px),
            linear-gradient(135deg,#6b4f3a 0%,#a9825f 50%,#e8d3b0 100%);
          transition:transform .6s cubic-bezier(.22,.61,.36,1);
        }
        .d05-01-02 .card05-01-02:hover .img05-01-02{transform:scale(1.15)}
        .d05-01-02 .zoom05-01-02{
          position:absolute;right:10px;bottom:8px;font-size:10px;color:#fff;
          background:rgba(0,0,0,.45);padding:3px 8px;border-radius:99px;
          opacity:0;transition:opacity .4s ease;
        }
        .d05-01-02 .card05-01-02:hover .zoom05-01-02{opacity:1}
        .d05-01-02 .body05-01-02{padding:12px 16px 16px}
        .d05-01-02 .body05-01-02 h4{margin:0 0 4px;font-size:13.5px;color:#222;line-height:1.45}
        .d05-01-02 .body05-01-02 p{margin:0;font-size:10.5px;color:#999}