HTML5是一種流行的網頁代碼，現在很多程序員使用HTML5創造出獨特的照片展示效果。下面是一個展示炫酷照片的HTML5代碼。

這是一個HTML5炫酷照片展示效果，它使用HTML5和CSS3創建，這個效果的主要優點是減少了頁面加載時間。

<div class="container">
<div class="gallery">
<div class="image-box">
<img src="image1.jpg">
</div>
<div class="image-box">
<img src="image2.jpg">
</div>
<div class="image-box">
<img src="image3.jpg">
</div>
<div class="image-box">
<img src="image4.jpg">
</div>
</div>
</div>
<style>
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.gallery {
display: flex;
justify-content: center;
align-items: center;
}
.image-box {
position: relative;
margin: 20px;
cursor: pointer;
}
.image-box::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.5s ease-in-out;
}
.image-box:hover::after {
opacity: 1;
}
.image-box img {
width: 100%;
height: auto;
display: block;
filter: grayscale(100%) brightness(75%) contrast(150%);
transition: all 0.5s ease-in-out;
}
.image-box:hover img {
filter: none;
transform: scale(1.1);
}
</style>

在這個代碼中，我們使用了flexbox布局來對圖片進行排列。每個圖片使用了一個<div>元素來包裹，它們的類名為“image-box”。通過使用偽元素<::after>對每個圖片進行濾鏡處理，使它看起來更酷。當鼠標懸停在圖片上時，濾鏡效果被移除，并且圖片通過CSS的縮放效果變大，放大倍數為1.1

總結一下，這個HTML5代碼創建了一個炫酷的照片展示效果，可以讓你的網頁更加吸引人和有趣。使用它可以在用戶體驗上做出一些改進。