CSS畫廊是一個很棒的效果,可以在網頁中展示美麗的圖片并增強用戶體驗。下面是一個基礎的CSS畫廊效果。
.gallery { display: flex; flex-wrap: wrap; justify-content: center; } .gallery-item { flex: 1 1 300px; margin: 10px; position: relative; height: 200px; overflow: hidden; } .gallery-item:hover .gallery-item-overlay { opacity: 1; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; } .gallery-item-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #333; opacity: 0; transition: opacity 0.3s ease-in-out; } .gallery-item-overlay-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; }
我們首先創建一個包含所有圖片的
元素。然后在每個
元素中放置一張圖片,并將其設置為相同的高度。通過CSS的flexbox屬性,我們可以輕松地使這些元素水平對齊并保持等距離。
我們使用所謂的“overlay(疊加)”來創建一個黑色半透明的遮罩來覆蓋圖片。當用戶將鼠標懸停在圖像上時,遮罩變得不透明并顯示標題文本。這是通過:hover偽類和transition屬性實現的。
在