CSS 照片放大效果圖是網頁設計中常見的鼠標懸停動畫效果之一。當鼠標懸停在圖片上時，會有放大效果，讓用戶更方便地瀏覽并欣賞圖片細節。

實現這一效果需要使用 CSS 的過渡（transition）、縮放（transform）和偽元素（:hover）屬性。下面是一個簡單的 CSS 代碼示例。

img {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
position: relative;
}
img::before {
content: '';
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
img:hover::before {
opacity: 1;
}
img:hover {
transform: scale(1.1);
z-index: 1;
}

該代碼首先將圖片的寬度和高度設為 200 像素，并將邊框半徑設為圓形。為了避免圖片放大時超出圓形邊界，設置了溢出隱藏（overflow: hidden）。然后使用偽元素為圖片遮罩添加黑色半透明背景，同時設置了過渡效果。當鼠標懸停在圖片上時，遮罩背景透明度從 0 到 1 漸變。這一動態效果通過 CSS 過渡屬性的設置實現。最后，使用 transform 和 z-index 屬性實現圖片的放大效果。

總之，CSS 照片放大效果圖是一種簡單而有效的網頁設計技巧，使得用戶能夠更方便地瀏覽和欣賞圖片。實現該效果的 CSS 代碼可以在舊版和現代瀏覽器上運行，并且可以在制作網站時靈活應用。