Hover Reveal Work Grid
介绍
两大三小的作品网格：上排两张宽幅大图，下排一窄一窄一宽；悬停时图片缓慢放大，底部渐黑并浮出项目名与等宽字副题和右上箭头，右下角浅灰药丸按钮收尾。
拆自整页模板 厚土 创意工作室首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Hover Reveal Work Grid 加进你的项目并换成你的配色。
适用场景
图片对比、视频展示、画廊、轮播和媒体卡片。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add houtu-works-grid
mcp › 使用 8pt MCP 调用 get_component("houtu-works-grid")
代码
Hover Reveal Work Grid 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<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);
}订阅 Builder 查看完整源码。查看价格