HTML炫酷的相冊代碼是網頁設計中常用的技術之一。通過HTML和CSS的結合，可以實現各種各樣的相冊效果，讓用戶在瀏覽圖片時感受到更多的視覺享受。

<div class="gallery">
<div class="image">
<img src="image1.jpg" alt="Image 1">
<div class="overlay">
<h3>Image 1</h3>
</div>
</div>
<div class="image">
<img src="image2.jpg" alt="Image 2">
<div class="overlay">
<h3>Image 2</h3>
</div>
</div>
<div class="image">
<img src="image3.jpg" alt="Image 3">
<div class="overlay">
<h3>Image 3</h3>
</div>
</div>
</div>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
}
.image {
position: relative;
margin: 10px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.overlay:hover {
opacity: 1;
}
h3 {
font-size: 1.5rem;
}
</style>

這段代碼展示了一個基本的相冊布局。使用了flex布局來實現響應式的瀑布流效果，每個圖片采用了帶有透明度的遮罩層來實現鼠標懸停時顯示圖片標題的效果。

此外，還可以通過JavaScript來為相冊增加更多的交互性，比如實現圖片輪播、放大縮小和拖動等等，讓用戶在瀏覽圖片時擁有更好的使用體驗。