キャプションスライドカード

<div class="card05-01-03">
          <div class="bg05-01-03"></div>
          <div class="cap05-01-03">
            <h4>沖縄の海と離島めぐり</h4>
            <p>エメラルドグリーンの海が広がる絶景スポット特集。</p>
          </div>
        </div>

.prev.d05-01-03{background:#f1f2f5}
        .d05-01-03 .card05-01-03{
          position:relative;width:220px;height:200px;border-radius:12px;
          overflow:hidden;box-shadow:0 4px 12px rgba(20,25,40,.15);cursor:pointer;
        }
        .d05-01-03 .bg05-01-03{
          position:absolute;inset:0;
          background:
            radial-gradient(circle at 80% 20%, rgba(255,255,255,.6) 0 16px, transparent 17px),
            linear-gradient(180deg,#7fd4e8 0%,#3aa7c9 55%,#f0e6c8 100%);
        }
        .d05-01-03 .cap05-01-03{
          position:absolute;left:0;right:0;bottom:0;padding:14px 16px 16px;
          background:linear-gradient(180deg,rgba(10,30,45,0) 0%,rgba(10,30,45,.85) 40%);
          color:#fff;transform:translateY(100%);
          transition:transform .4s cubic-bezier(.22,.61,.36,1);
        }
        .d05-01-03 .card05-01-03:hover .cap05-01-03{transform:translateY(0)}
        .d05-01-03 .cap05-01-03 h4{margin:0 0 6px;font-size:14px;line-height:1.4}
        .d05-01-03 .cap05-01-03 p{margin:0;font-size:11px;line-height:1.6;opacity:.85}