CSS放大鏡源碼是什么？它可以讓你的網站圖片展示更加生動、立體，讓用戶更加方便、快捷的瀏覽你的網站內容。下面我們就一起來看看CSS放大鏡的源碼。

//html代碼
<div class="picZoom"></div>
<div class="picZoom-show"></div>
//css代碼
.picZoom{
position: relative;
background: url(./images/pic.jpg);
background-size: cover;
width: 400px;
height: 400px;
border: 1px solid #ccc;
margin: 50px auto;
overflow: hidden;
cursor: zoom-in;
}
.picZoom-show{
position: absolute;
top: -200px;
left: -200px;
width: 800px;
height: 800px;
background: url(./images/pic.jpg);
background-size: 800px 800px;
display: none;
}
.picZoom:hover > .picZoom-show{
display: block;
z-index: 999;
}
.picZoom:hover{
cursor: zoom-out;
}

以上就是一個CSS放大鏡的源碼，它通過CSS來實現了圖片的放大和縮小功能。具體來說，我們先在一個外層div中放入要展示的圖片，并設置寬高等樣式。隨后，我們再在這個外層div中插入一個尺寸更大的內層div，用來放大對應圖片。然后，使用:hover選擇器來判斷鼠標的懸浮狀態，進而對圖片的大小進行調整。具體來說，當鼠標懸浮在外層div上時，使用顯示:block;來設置內層div的顯示狀態，并設置z-index值來顯示在最前面，從而達到放大的效果。當鼠標離開時，圖片恢復原來的大小。

趕快動手試試吧，相信這個小小的CSS放大鏡一定會給你的網站帶來不小的驚喜！