求助：实现图片Hover时文字作为裁剪蒙版的交互效果

实现代码 #

HTML结构

<!-- 单个博客缩略图 -->
<a href="/blog/post-1" class="blog-thumbnail">
  <img src="你的图片地址" alt="文章缩略图">
  <span class="thumbnail-title">文章标题内容</span>
</a>

CSS样式

.blog-thumbnail {
  position: relative;
  display: block;
  width: 300px;
  height: 200px;
  overflow: hidden;
  text-decoration: none;
}

.blog-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.blog-thumbnail .thumbnail-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: transparent; /* 隐藏文字本身颜色，仅透出背景裁剪效果 */
  background: url("你的图片地址") center/cover;
  background-clip: text;
  -webkit-background-clip: text; /* 兼容webkit内核浏览器 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Hover交互状态 */
.blog-thumbnail:hover img {
  opacity: 0;
}

.blog-thumbnail:hover .thumbnail-title {
  opacity: 1;
}

关键细节说明 #

• 用<a>作为容器，确保整个缩略图区域都能触发跳转，同时包裹图片和标题文字。
• 未Hover状态：标题文字通过opacity:0完全隐藏，只显示图片；设置color:transparent是为了避免hover时出现文字本身的颜色轮廓。
• Hover状态：图片透明度变为0隐藏，标题文字透明度变为1显示，此时background-clip: text会把背景图片裁剪成文字形状，实现「仅透过文字看图片」的效果。
• 添加transition属性让状态切换更平滑，提升交互质感。

批量复用方案 #

如果要制作一组博客缩略图，只需复制多份<a>标签，替换对应的图片地址、文章链接和标题文字即可，CSS样式无需重复编写。

内容的提问来源于stack exchange，提问作者reuben