请求实现鼠标悬停图片时呈现透明白色效果并显示文本的HTML/CSS代码

我明白你想要的效果——鼠标悬停在图片上时，图片蒙上一层淡白色的半透明遮罩，同时显示指定文本。这种效果用纯HTML+CSS就能轻松实现，不用复杂的JS。下面是经过测试的可行方案，我会一步步解释：

核心思路 #

我们需要一个容器来包裹图片和文本层：

• 容器设置为相对定位，作为文本层的定位基准
• 图片铺满容器，保证自适应
• 文本层默认隐藏（或透明），悬停时显示白色半透明背景和文本
• 加入过渡动画让效果更平滑

完整代码示例 #

<div class="project-card">
  <img src="your-image.jpg" alt="项目图片" class="project-image">
  <div class="project-overlay">
    <p class="project-text">这里是要显示的文本内容</p>
  </div>
</div>

/* 容器样式 */
.project-card {
  position: relative;
  width: 300px; /* 可根据需求调整宽度 */
  height: 200px; /* 可根据需求调整高度 */
  overflow: hidden; /* 防止内容溢出 */
  cursor: pointer; /* 鼠标悬停显示手型 */
}

/* 图片样式 */
.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并铺满容器 */
  transition: all 0.3s ease; /* 过渡动画 */
}

/* 叠加层样式 */
.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* 白色半透明，0.8为透明度，可调整 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.3s ease; /* 过渡动画 */
}

/* 文本样式 */
.project-text {
  color: #333; /* 文本颜色，可调整 */
  font-size: 18px;
  text-align: center;
  padding: 0 20px;
}

/* 悬停时的效果 */
.project-card:hover .project-overlay {
  opacity: 1; /* 显示叠加层 */
}

/* 可选：悬停时图片稍微变暗，增强层次感 */
.project-card:hover .project-image {
  filter: brightness(0.9); /* 图片亮度降低，可根据需求调整 */
}

关键细节说明 #

1. 透明度调整：rgba(255,255,255,0.8) 中的最后一个值是透明度，0为完全透明，1为完全不透明。你可以改成0.7或0.9，找到最贴合需求的效果。
2. 过渡动画：transition 属性让悬停效果从隐藏到显示平滑过渡，避免生硬切换，提升用户体验。
3. 图片适配：object-fit: cover 确保图片不会拉伸变形，同时铺满容器，适配不同比例的图片。
4. 灵活布局：容器的宽高可以改成百分比（比如width: 100%），实现响应式效果，适配不同屏幕尺寸。

你可以直接复制这段代码到项目中，替换图片路径和文本内容即可。如果需要调整文本样式、动画速度，直接修改对应的CSS属性就好。

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