图片展示html css代码,纯CSS3实现图片展示特效

以下是一个简单的纯CSS3实现图片展示特效的示例代码：

HTML部分：

<div class="image-gallery">
  <div class="gallery-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="gallery-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="gallery-item">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS部分：

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.gallery-item {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 20px;
  overflow: hidden;
}

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

.gallery-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%);
  transform: translateY(100%);
  transition: transform 0.5s ease;
}

.gallery-item:hover::before {
  transform: translateY(0);
}

说明：

- `.image-gallery` 使用 Flexbox 布局，使图片列表居中且自适应宽度。
- `.gallery-item` 是每一张图片的容器，使用 `position: relative` 使其内部元素可以使用绝对定位。
- `.gallery-item img` 设置图片宽高为100%，并使用 `object-fit: cover` 让图片自适应容器大小。
- `.gallery-item::before` 使用一个伪元素作为遮罩层，在图片上方覆盖一层白色渐变，模拟图片被遮住的效果。`transform: translateY(100%)` 将遮罩层下移，并使用 `transition` 属性实现动画效果。
- `.gallery-item:hover::before` 鼠标悬停时，将遮罩层上移，显示出完整的图片。

效果如下图所示：