相冊是一種非常流行的展示照片、圖片和藝術作品的方式。為了使相冊更加美觀和易于使用，許多網站和開發人員使用CSS來構建和設計他們的相冊組件。在這篇文章中，我們將介紹一些常見的相冊CSS樣式模板。

/* 1. 網格布局 */
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
}
/* 2. 圖片浮塊式樣式 */
.photo-block {
display: inline-block;
position: relative;
margin: 10px;
}
.photo-block img {
display: block;
width: 100%;
}
.photo-block:hover img {
opacity: 0.8;
}
.photo-block .overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.2s;
}
.photo-block:hover .overlay {
opacity: 1;
}
.photo-block .overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 20px;
text-align: center;
}
/* 3. 縮略圖圖庫 */
.thumbnail-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.thumbnail-gallery .thumbnail {
flex: 1 0 200px;
margin: 10px;
position: relative;
}
.thumbnail-gallery .thumbnail img {
display: block;
width: 100%;
}
.thumbnail-gallery .thumbnail:hover img {
opacity: 0.8;
}
.thumbnail-gallery .thumbnail .overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.2s;
}
.thumbnail-gallery .thumbnail:hover .overlay {
opacity: 1;
}
.thumbnail-gallery .thumbnail .overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 20px;
text-align: center;
}

以上這些CSS樣式模板只是相冊中的一小部分，你可以根據自己的需求，選擇適合自己的CSS樣式模板，使你的相冊更美觀、流暢和易于使用。