在當前的電子商務時代，我們經常會在各種在線商城上購物。當我們找到心儀的商品時，為了更全面了解它的材質與質量，我們通常會查看細節圖。然而，有時候這些細節圖在縮略圖上過于模糊，我們需要放大查看。這里介紹一種使用CSS實現放大細節圖的方法。

首先，在HTML中添加一張細節圖的縮略圖：

<img src="thumbnail.jpg" alt="product thumbnail">

接著，在CSS中，我們需要創建一個容器，并將縮略圖作為該容器的背景圖片：

.container {
position: relative;
width: 200px; /* 容器的寬度 */
height: 200px; /* 容器的高度 */
background: url(thumbnail.jpg);
background-size: cover; /* 等比例縮放背景圖片 */
}

現在，我們已經創建了一個擁有細節圖縮略圖背景的容器。接下來，我們需要添加鼠標懸停時放大細節圖的效果。這可以通過創建一個偽元素并使用CSS的scale()函數實現：

.container:hover::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(detail.jpg);
background-size: cover;
transform: scale(2); /* 將細節圖放大兩倍 */
}

這里我們使用::after偽元素來創建一個遮罩層，這樣當鼠標懸停在縮略圖上時，遮罩層將被添加到容器中。使用transform: scale()函數，我們將細節圖放大兩倍。最后，我們需要將遮罩層的透明度設置為0，以避免它擋住了縮略圖背景。

通過這種方法，我們可以輕松地實現在商城中放大細節圖的效果，讓用戶更全面地了解自己所購買的商品。