CSS是前端開發中非常重要的一門技術，它的用途非常廣泛，包括網頁設計，動畫效果等。今天我們來介紹一下如何通過CSS來實現照片動畫。

/* HTML */
/* CSS */
.photo {
position: relative;
width: 400px;
height: 300px;
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: rgba(255, 255, 255, 0.5);
transition: all 0.5s ease;
}
.photo:hover::after {
opacity: 1;
}

首先，我們需要在HTML中創建一個包含照片的div元素，并在其中設置圖片的src屬性。接下來，在CSS中，我們需要給這個div元素設置相對定位，并為其設置寬度和高度。然后，我們需要對圖片設置寬度和高度為100%來鋪滿整個div元素，這里使用了object-fit屬性進行填充。

接下來，我們使用CSS偽元素::after創建一個覆蓋整個div元素的半透明層，并將其位置設置到最上面。我們給這個層設置opacity為0，表示一開始它是不可見的。我們還為它設置一個背景顏色，這里使用了rgba()函數來設置顏色以及不透明度。通過transition屬性，我們為這個層設置了動畫效果，當鼠標懸停在div元素上時，我們將這個層的opacity設置為1，使其變為可見狀態，并呈現出淡入淡出的動畫效果。

通過上述CSS代碼，我們成功實現了一個簡單的照片動畫。這種動畫效果可以很好地應用于相冊、圖庫等場景中，讓靜態的圖片變得更加生動有趣。