Video Card Hover Showcase

Build a video gallery grid: responsive masonry cards that show a poster, autoplay a muted looping preview on hover (or when centered on mobile via IntersectionObserver), scale up 4% with a soft shadow, and show title + creator chips. Lazy-load videos; pause any that leave the viewport.

<style>*{box-sizing:border-box;margin:0}body{font-family:Inter,system-ui,sans-serif;overflow:hidden}</style><style>body{background:#0b0b0f;height:100vh;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:20px}.c{border-radius:14px;position:relative;overflow:hidden;transition:transform .3s}.c:hover{transform:scale(1.04)}
.c i{position:absolute;inset:0;animation:h 6s linear infinite}.c span{position:absolute;left:10px;bottom:10px;color:#fff;font:600 13px system-ui;background:#0008;padding:4px 8px;border-radius:6px}
@keyframes h{to{filter:hue-rotate(360deg)}}</style>
<div class="c"><i style="background:linear-gradient(135deg,#7c5cff,#ff4d1a)"></i><span>Launch film</span></div><div class="c"><i style="background:linear-gradient(135deg,#c6ff3d,#00b3ff)"></i><span>UI morph</span></div><div class="c"><i style="background:linear-gradient(135deg,#ff3d8b,#ffd23d)"></i><span>Kinetic type</span></div>