Hover Reveal Work Grid
Overview
A work grid of two large and three small pieces: two wide images on top, then narrow, narrow and wide below. On hover the image zooms slowly, the bottom darkens and the project name, a monospace subtitle and a corner arrow appear; a light gray pill button closes it off bottom right.
Taken from the page template Houtu Creative Studio Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Hover Reveal Work Grid to your project in your colors.
Where to use it
Image comparisons, video showcases, galleries, carousels and media cards.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add houtu-works-grid
mcp › Use 8pt MCP to call get_component("houtu-works-grid")
Code
Source for Hover Reveal Work Grid. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-hwg"><p class="x-hwg__lbl">精选作品</p><div class="x-hwg__row"><a class="x-hwg__card" href="#"><img src="https://8pt.dev/api/media/d6e81af9a07d9db7b34cca68.webp" alt="林间红土小路航拍"><span class="x-hwg__mark">野径</span><span class="x-hwg__meta"><span><b>野径</b><small>真实故事，好好讲述</small></span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"/><path d="M8.5 7H17v8.5"/></svg></span></a><a class="x-hwg__card" href="#"><img src="https://8pt.dev/api/media/5ecdf074ff94f69a69c7b033.webp" alt="浅色天幕中漂浮的镜面缎带"><span class="x-hwg__mark x-hwg__mark--ink">镜川</span><span class="x-hwg__meta"><span><b>镜川</b><small>为一位时装缪斯造的数字栖所</small></span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"/><path d="M8.5 7H17v8.5"/></svg></span></a></div><div class="x-hwg__row x-hwg__row--b"><a class="x-hwg__card" href="#"><img src="https://8pt.dev/api/media/afd031651cd9f1b0b38cd708.webp" alt="紫色灯框下的训练馆"><span class="x-hwg__meta"><span><b>栖馆</b><small>运动精神的第二个家</small></span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"/><path d="M8.5 7H17v8.5"/></svg></span></a><a class="x-hwg__card" href="#"><img src="https://8pt.dev/api/media/464d4d88e7c42a8bfe0d0409.webp" alt="毛绒爪子举起黄色能量棒"><span class="x-hwg__meta"><span><b>绒绒</b><small>成年人的能量，操场的劲头</small></span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"/><path d="M8.5 7H17v8.5"/></svg></span></a><a class="x-hwg__card" href="#"><img src="https://8pt.dev/api/media/91aceadc309d3861aa429a40.webp" alt="暗场中的拉伸动作"><span class="x-hwg__meta"><span><b>衡息</b><small>被认真设计的长期健康</small></span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"/><path d="M8.5 7H17v8.5"/></svg></span></a></div><div class="x-hwg__more"><a href="#">全部作品<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"/><path d="M8.5 7H17v8.5"/></svg></a></div></div>
@import url("https://fonts.googleapis.com/css2?family=Fragment+Mono&family=Inter+Tight:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@400;600&family=ZCOOL+QingKe+HuangYou&display=swap");.x-hwg{width:100%;max-width:1200px;box-sizing:border-box;padding:0 24px;background:#FFFFFF;color:#000;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif}.x-hwg__lbl{margin:0 0 22px;font-family:"Fragment Mono","Noto Sans SC",ui-monospace,monospace;font-size:12px;letter-spacing:.06em}.x-hwg__row{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:340px}.x-hwg__row--b{grid-template-columns:1fr 1fr 2fr;margin-top:10px;height:300px}.x-hwg__card{position:relative;display:block;border-radius:6px;overflow:hidden;background:#111;color:#fff;text-decoration:none}.x-hwg__card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}.x-hwg__card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:0;transition:opacity .4s}.x-hwg__card:hover img{transform:scale(1.05)}.x-hwg__card:hover::after,.x-hwg__card:focus-visible::after,.x-hwg__card.is-demo::after{opacity:1}.x-hwg__mark{position:absolute;inset:0;display:grid;place-items:center;font-family:"Noto Serif SC",serif;font-weight:600;font-size:46px;letter-spacing:.04em;text-shadow:0 2px 24px rgba(0,0,0,.35);pointer-events:none}.x-hwg__mark--ink{color:#1d1d1f;font-style:italic;letter-spacing:.3em;text-shadow:none}.x-hwg__meta{position:absolute;z-index:1;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;align-items:flex-end;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}.x-hwg__card:hover .x-hwg__meta,.x-hwg__card:focus-visible .x-hwg__meta,.x-hwg__card.is-demo .x-hwg__meta{opacity:1;transform:none}.x-hwg__meta b{display:block;font-size:17px}.x-hwg__meta small{font-family:"Fragment Mono","Noto Sans SC",ui-monospace,monospace;font-size:11px;letter-spacing:.06em}.x-hwg__meta svg{width:20px;height:20px}.x-hwg__more{display:flex;justify-content:flex-end;padding-top:18px}.x-hwg__more a{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 14px;border-radius:6px;background:#F2F2EF;color:#000;font-size:12.5px;font-weight:500;text-decoration:none}.x-hwg__more svg{width:13px;height:13px}@media (prefers-reduced-motion:reduce){.x-hwg__card img,.x-hwg__meta,.x-hwg__card::after{transition:none}}(root) => {
const first = root.querySelector(".x-hwg__card");
if (!first) return;
first.classList.add("is-demo");
const off = () => first.classList.remove("is-demo");
root.addEventListener("pointerover", off, { once: true });
return () => root.removeEventListener("pointerover", off);
}Subscribe to Builder to see the full source.See pricing