作品墙、案例列表常见这种交互：平时只看图，鼠标移上去，半透明黑层带着标题和「快速预览」从上往下盖住图片；移开又收回去。本例用 jQuery 的 animate 改 top，时长 500 毫秒。
图片卡片和遮罩层如何对应
每一项是一个 li：底层一张图，上层一块 .bt_tu 遮罩。li 设 position: relative、overflow: hidden，遮罩绝对定位后才不会漏出卡片外。本例两列，宽约 22%，高度 315。
图用绝对定位铺满卡片。换项目时改 src、标题文字和按钮链接。jQuery 写在 hoverMask.js 前面，否则 $ 未定义。
遮罩层初始位置如何设在上方
遮罩宽高跟卡片一致（width/height: 100%），背景 rgba(0,0,0,0.8)。关键是默认 top: -100%：整块先停在卡片正上方，再靠父级 overflow: hidden 裁掉，所以平时看不见。
我第一次看也卡了一下：只写 top: -100% 却忘了父级 overflow: hidden，遮罩会露在卡片上面，动画还没开始就看得见一块黑。
鼠标移入移出时自上而下的动画怎么写
移入把 top 从 -100% 收到 0，遮罩刚好盖满卡片；移出再回到 -100%。用 animate，并在前面加 stop()，避免鼠标快速划过时动画排队、遮罩来回抖。
500 是毫秒，想更快改成 300，更慢改成 800。事件挂在 body 上委托，列表是接口渲染出来的也能用。只动画当前 li 里的 .bt_tu，不会带动旁边卡片。
遮罩里的标题和按钮样式怎么写
标题在 .bt_tus p：居中、加粗、金色 #d1b883，过长用省略号。按钮 .btn 用 padding: 10px 28px 撑开，不要写死宽高；圆角做成胶囊形，可点加手型。上边距用百分比，随卡片高度大致居中。
颜色、圆角、字号按设计改。按钮 href 换成预览页或详情地址。
用在作品或案例列表时如何套用
把 css/hoverMask.css、js/hoverMask.js 和图片拷进项目，列表项按上面的 li 结构循环输出。多列改宽度和间距；卡片高度跟图比例对一下，遮罩是 height: 100%，一般不用再写死 314。
动画时长、遮罩透明度、按钮文案按栏目调整。这坑我见过不止一次：卡片高度和图片比例差太多，标题会偏上或偏下，这时改 .bt_tus 的 padding-top，比改动画参数更有效。