纯css3相册案例源码

纯CSS3相册案例源码可以通过以下方式实现：

HTML结构：

<div class="gallery">
  <div class="photo">
    <img src="photo1.jpg" alt="Photo 1" />
    <div class="caption">照片1</div>
  </div>
  <div class="photo">
    <img src="photo2.jpg" alt="Photo 2" />
    <div class="caption">照片2</div>
  </div>
  <div class="photo">
    <img src="photo3.jpg" alt="Photo 3" />
    <div class="caption">照片3</div>
  </div>
</div>

CSS样式：

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

.photo {
  position: relative;
  margin: 10px;
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s;
}

.photo:hover .caption {
  opacity: 1;
}

上述代码中，我们创建了一个名为"gallery"的容器，通过设置其为flex布局并使用flex-wrap属性实现图片的自动换行展示。每个照片由一个包含图片和标题的容器表示，图片和标题在容器中的位置通过CSS样式进行定位。当鼠标悬停在照片上时，标题栏的透明度将从0到1渐变，实现了图片展示效果。

请将代码保存为HTML文件，同时在HTML所在目录下放置相册所需的图片文件（photo1.jpg、photo2.jpg、photo3.jpg），即可在浏览器中打开该HTML文件查看纯CSS3相册的效果。