[分享]css3卡片式图片

CSS3卡片式图片是一种非常炫酷的展示图片的方式。它可以让图片在页面上呈现出卡片的效果，给用户带来一种非常震撼的视觉体验。以下是使用CSS3实现卡片式图片的示例代码：.card { width: 30...

CSS3卡片式图片是一种非常炫酷的展示图片的方式。它可以让图片在页面上呈现出卡片的效果，给用户带来一种非常震撼的视觉体验。以下是使用CSS3实现卡片式图片的示例代码：

.card {
  width: 300px;
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 5px 5px 30px rgba(0,0,0,0.7);
}

.card .image {
  width: 100%;
  height: 100%;
  background-image: url(图片地址);
  background-size: cover;
  background-position: center;
}

.card .overlay {
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
}

.card .overlay h3 {
  margin: 10px;
  font-size: 18px;
}

.card .overlay p {
  margin: 0 10px 10px 10px;
  font-size: 14px;
} 

上述代码中，.card是卡片的容器，.image是图片容器，.overlay是卡片底部的遮罩。通过使用position属性可以将.overlay定位到卡片底部，同时使用背景颜色为文字添加对比，让文字更加清晰。

最后，我们在HTML中调用这些类即可展示出一个炫酷的卡片图片：

<div class="card">
  <div class="image"></div>
  <div class="overlay">
    <h3>标题</h3>
    <p>描述文字</p>
  </div>
</div> 

CSS3卡片式图片的实现非常简单，通过灵活运用CSS属性可以轻松制作出各种炫酷的效果，为网站的设计增添不少亮点。