CSS鼠標放上圖片放大鏡 在網頁設計中，經常需要展示圖片。為了能夠更好地展示出圖片的細節，我們可以使用CSS鼠標放上圖片放大鏡的效果。這種效果可以讓用戶在鼠標移動到圖片上時，以放大的方式呈現出圖片的細節，讓用戶更加清晰地看到圖片的內容。 使用HTML和CSS就可以實現這種效果，下面是一個HTML代碼示例：

這段代碼中，我們使用一個包含img標簽和一個div標簽的容器來展示圖片。img標簽用來顯示圖片，而div標簽則是用來放置放大后的圖片的容器。 下面是CSS代碼示例：

.container {
position: relative;
}
.zoom {
position: absolute;
bottom: 100%;
left: 0;
margin-left: 10px;
margin-bottom: 10px;
width: 200px;
height: 200px;
border-radius: 50%;
border: 3px solid #ddd;
overflow: hidden;
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
}
.container:hover .zoom {
opacity: 1;
}
.zoom img {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 400px;
transform: scale(2);
transform-origin: 0 0;
transition: transform 0.3s;
}
.zoom:hover img {
transform: scale(1);
}

這段代碼中，我們使用了三個選擇器：.container、.zoom、.zoom img。.container選擇器設置了相對定位，而.zoom選擇器則設置了絕對定位，并設置了圖片的尺寸、邊框、圓角以及隱藏圖片外部的部分。 我們在.container:hover .zoom選擇器中設置了opacity屬性，當鼠標懸停在.container元素上時，.zoom容器就會出現。.zoom img選擇則設置了圖片的尺寸和放大比例，我們使用了transform屬性來實現圖片的縮放。 整個效果使用簡單的HTML和CSS代碼即可實現，可以幫助我們更好地展示圖片，讓用戶更清晰地了解圖片的內容。