Caption Reveal Card

IMG_PLACEHOLDER

VOID_RUNNER

SECTOR_7G

HTML_STRUCTURE

<div class='bh-card-v2-img'><div class='bh-img-v2-box'>IMG_PLACEHOLDER</div><div class='bh-img-v2-cap'><h4>VOID_RUNNER</h4><p>SECTOR_7G</p></div></div>

CSS_STYLING

.bh-card-v2-img { width: 100%; max-width: 300px; position: relative; background: #111; border: 1px solid #222; overflow: hidden; } .bh-img-v2-box { height: 200px; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #222; } .bh-img-v2-cap { position: absolute; bottom: -100%; left: 0; width: 100%; background: #fff; color: #000; padding: 15px; transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .bh-card-v2-img:hover .bh-img-v2-cap { bottom: 0; }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.