今天我們來學習一下如何制作一個圖片放大鏡效果。 首先我們需要用HTML來準備我們的圖片和容器。

<div class="container">
<img src="image.jpg">
<div class="zoom"></div>
</div>

我們創建了一個容器，內部包含一張圖片和一個用于放大的盒子。 接下來，我們要用CSS來實現放大鏡的效果。我們需要兩個容器，一個用于定位原圖和放大區域，另一個用于包含放大圖像。我們可以用媒體查詢來設置容器的寬度，同時在hover時設置放大鏡容器的可見性。

.container {
position: relative;
width: 500px;
}
.zoom {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
visibility: hidden;
pointer-events: none;
}
.container:hover .zoom {
visibility: visible;
}
.zoom-image {
position: absolute;
top: 0;
left: 100%;
transform: translateX(-50%);
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
z-index: 2;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
@media (max-width: 600px) {
.container {
width: 100%;
}
}

我們可以看到，我們用偽元素`:before`創建了一個放大鏡，并設置了樣式，將它的寬度和高度設置成了200px，并將border-radius設置為50% 使其變成一個圓形，同時，我們還將背景顏色設置為半透明。 我們同樣設置了.zoom-image的樣式，將其的寬度和高度設置為400px，并將border-radius也設置為50%，同時overflow為hidden以便我們只能看到800*800像素的區域。這里我們設置了一個z-index的優先級。 在手機端，我們將容器的寬度設置為100%。 代碼如上！