HTML卡片悬停遮罩图文效果

HTML卡片悬停遮罩图文效果是一种网页设计中的交互式元素，通常用于显示信息或者引导用户对某个元素进行操作。当你将鼠标悬停在一个卡片上时，卡片通常会有一个淡入或透明的遮罩层覆盖在图片或内容上，这给人一种聚焦的效果，并隐藏了其他部分的信息，直到用户移开鼠标。

这种效果通常是通过CSS样式实现的，包括以下几个步骤：

1. 定义基础样式：给卡片容器设置基本样式，比如背景色、边框等。
2. 鼠标悬停状态：当`hover`伪类触发时，改变遮罩层的显示状态（如opacity属性调整到不完全透明），同时可能移动或调整主内容的位置。
3. CSS动画：可以添加一些简单的动画效果，如渐变进入或离开，使得过渡更平滑。

下面是一个简化的示例代码：

<div class="card">
  <img src="..." alt="...">
  <div class="mask" style="display:none;"></div>
  <div class="content">...</div>
</div>

<style>
.card {
  position: relative;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 遮罩颜色 */
  display: none; /* 初始隐藏 */
  transition: opacity 0.3s ease-in-out; /* 动画效果 */
}
.card:hover .mask {
  display: block; /* 鼠标悬停时显示 */
  opacity: 1; /* 变为不透明 */
}
</style>