css卡片悬停遮罩显示效果

你可以使用CSS的伪元素和过渡效果来实现卡片悬停遮罩显示效果。以下是一个简单的示例代码：

HTML代码：

<div class="card">
  <img src="image.jpg" alt="image">
  <div class="overlay">
    <h3>Card Title</h3>
    <p>Card description goes here.</p>
  </div>
</div>

CSS代码：

.card {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.card:hover .overlay {
  opacity: 1;
}

.card .overlay h3 {
  margin-top: 50px;
  text-align: center;
}

.card .overlay p {
  text-align: center;
}

在这个示例中，我们将卡片设置为相对定位，并将其高度和宽度设置为固定值。使用`overflow: hidden`属性可以确保图像不会溢出卡片。然后，我们将图像设置为卡片的背景，并使用`object-fit: cover`属性来确保它填充整个卡片。

接下来，我们将叠加层设置为绝对定位，并使用`opacity`属性将其设置为完全透明。我们还使用`transition`属性为叠加层添加渐变效果。在卡片悬停时，我们将叠加层的不透明度设置为1，从而使其显示出来。

最后，我们为叠加层的标题和描述添加样式，以使它们居中对齐。