css3卡片悬停交互代码

好的，你可以使用以下代码实现CSS3卡片悬停交互效果：

HTML代码：

<div class="card">
  <img src="image.jpg" alt="Card Image">
  <div class="card-overlay">
    <h2>Card Title</h2>
    <p>Card Description</p>
  </div>
</div>

CSS代码：

.card {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.card:hover .card-overlay {
  transform: translateY(0);
}

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

.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.card-overlay h2 {
  font-size: 30px;
  margin: 0;
}

.card-overlay p {
  font-size: 16px;
  line-height: 1.5;
}

通过这段代码，当鼠标悬停在卡片上时，会出现卡片标题和描述的遮罩层，给用户提供更多信息。