Hover Reveal Card
A card that lifts on hover and reveals a description and call-to-action with a smooth expand.
<div class="hc"><div class="hc-img"></div><div class="hc-body"><h3>Mountain Trek</h3><p class="hc-desc">A 4-day guided hike through alpine passes with stunning summit views.</p><button class="hc-cta">Book now</button></div></div>body{background:#f6f7fa}
.hc{width:260px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(20,25,50,.1);font-family:system-ui,sans-serif;transition:transform .3s,box-shadow .3s}
.hc:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(20,25,50,.18)}
.hc-img{height:140px;background:linear-gradient(135deg,#ff7a18,#ff477e)}
.hc-body{padding:18px;position:relative}
.hc-body h3{margin:0 0 8px;color:#1a1f36}
.hc-desc{margin:0;color:#8a93ad;font-size:13px;line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:.35s}
.hc:hover .hc-desc{max-height:80px;opacity:1;margin-bottom:14px}
.hc-cta{width:100%;padding:11px;border:0;border-radius:10px;background:#1a1f36;color:#fff;font-weight:700;cursor:pointer;transform:translateY(8px);opacity:0;transition:.35s}
.hc:hover .hc-cta{transform:none;opacity:1}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.