最近我在學習CSS編程，發現了一些非常好看的CSS圖片展示代碼，今天我想分享給大家。

.image-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.image-item {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.image-item img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease-out;
}
.image-item:hover img {
transform: scale(1.1);
}
.image-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
opacity: 0;
transition: opacity 0.2s ease-out;
}
.image-item:hover::before {
opacity: 1;
}

這段代碼可以幫助我們展示圖片，并且添加了一些鼠標懸停時的動畫效果。我們可以將需要展示的圖片放置在類名為.image-item的元素中，然后將這些元素放置在一個帶有.image-grid類名的容器中。

其中，.image-grid類設置了網格布局，包含了3個列，并且設定了它們的寬度比例為1:1:1。兩個元素的間距為20px。而圖片元素.image-item則設置了一個100%的高度，以達到正方形的效果。這些元素的圖片部分也使用了CSS屬性來進行自適應處理，并且會在鼠標懸停時動態放大一些。

最后，每個圖片元素都額外添加了一個偽元素::before，用于展示一個透明度變化的黑色半透明蒙層，以達到更好的視覺效果。

總之，這段代碼可以讓我們輕松展示圖片，讓網頁更加生動，吸引眼球。