CSS 实现 图片鼠标悬停折叠效果

要实现图片鼠标悬停折叠效果，可以通过CSS的transform属性来实现。具体步骤如下：

1. HTML结构：首先需要在HTML中添加一张图片，然后用一个div将图片包裹起来，并添加一个文字描述：

<div class="image-box">
  <img src="image.jpg" alt="图片描述">
  <div class="description">图片描述</div>
</div>

1. CSS样式：接下来需要对这个div设置一些基本样式，如宽度、高度、边框等，并将图片设为相对定位，用于后续进行绝对定位：

.image-box {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  position: relative;
}

.image-box img {
  position: absolute;
  top: 0;
  left: 0;
}

1. 鼠标悬停效果：要实现鼠标悬停折叠效果，需要在鼠标悬停时对图片进行变换，这里使用CSS的transform属性，并在悬停状态下增加一个背景遮罩：

.image-box:hover img {
  transform: scale(0.8);
}

.image-box:hover::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  left: 0;
}

其中，transform: scale(0.8); 表示将图片缩小为原来的80%。而:hover伪类则表示鼠标悬停状态下生效。另外，添加了一个:before伪元素来实现背景遮罩效果。

示例1：

<div class="image-box">
  <img src="image1.jpg" alt="图片描述">
  <div class="description">图片描述</div>
</div>

.image-box {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  position: relative;
}

.image-box img {
  position: absolute;
  top: 0;
  left: 0;
}

.image-box:hover img {
  transform: scale(0.8);
}

.image-box:hover::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  left: 0;
}

示例2：

<div class="image-box">
  <img src="image2.jpg" alt="图片描述">
  <div class="description">图片描述</div>
</div>

.image-box {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  position: relative;
}

.image-box img {
  position: absolute;
  top: 0;
  left: 0;
}

.image-box:hover img {
  transform: scale(0.8);
}

.image-box:hover::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  left: 0;
}

通过以上步骤可以在网页中实现图片鼠标悬停折叠效果。