CSS 是一種非常方便的語言，可以實現許多酷炫的效果。在這篇文章中，我們將討論如何使用 CSS 實現圖片放大效果，這是一種常見的網站設計效果。

要實現這個效果，我們需要使用 CSS 的 transform 屬性和一些 JavaScript 代碼。另外，我們還需要確保我們的 HTML 代碼中包含正確的圖片標記。

首先，我們需要添加一些 CSS 樣式來改變我們的圖片的尺寸并隱藏一些非必要的元素。我們可以使用以下 CSS 代碼：

img {
width: 200px; /* 設置圖片的寬度 */
height: auto; /* 讓高度根據比例自適應 */
transition: transform .2s ease-out; /* 添加過渡效果 */
}
.container {
position: relative; /* 設置相對位置 */
overflow: hidden; /* 隱藏溢出的元素 */
}
.container:hover img {
transform: scale(1.1); /* 鼠標移動到容器時，將圖片放大10% */
}
.overlay {
position: absolute; /* 設置絕對位置 */
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* 初始狀態下，透明度為0 */
transition: opacity .2s ease-out; /* 添加過渡效果 */
}
.container:hover .overlay {
opacity: 1; /* 鼠標移動到容器時，透明度變為1 */
}

這段代碼非常簡單。我們首先將 img 標簽的寬度設置為 200 像素，并使用 transition 屬性添加 0.2 秒的平滑過渡效果。

然后，我們為容器添加了相對位置和隱藏溢出的元素的樣式。在容器鼠標移動到上面的時候，我們將圖片放大 10% 并更改透明度。

現在，我們需要添加一些 JavaScript 代碼來確保我們的圖像標記被正確設置。我們可以使用以下代碼：

const images = document.querySelectorAll('.container img')
images.forEach(img =>{
const src = img.getAttribute('src')
const alt = img.getAttribute('alt')
const title = img.getAttribute('title')
const container = img.parentNode
const overlay = document.createElement('div')
overlay.classList.add('overlay')
overlay.innerHTML = ``
container.appendChild(overlay)
})

這段代碼是一個循環，它將遍歷每個 img 元素，獲取它的 src、alt 和 title 屬性值，然后創建一個 overlay div 元素，并向其中添加一個新的 img 元素。overlay div 將透明度設置為 0。

當我們將鼠標移動到圖片所在的容器上的時候，overlay div 的透明度將從 0 到 1 過渡，顯示重疊的圖像。這就是我們想要的效果。

總之，通過 CSS 和 JavaScript，我們可以實現一個酷炫的圖片放大效果。這個效果可以讓你的網站看起來更加現代和有吸引力。