CSS懸掛圖片效果，是一種常見的網頁設計技巧，可以很好地增強頁面的美觀性和視覺效果。具體實現方法如下：

.img-wrap {
position: relative;
display: inline-block;
margin: 20px;
width: 200px;
height: 200px;
}
.img-wrap:hover .img-overlay {
opacity: 1;
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.img-overlay:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-left: -30px;
margin-top: -30px;
background: url('https://example.com/icon.png') no-repeat;
background-size: 60px 60px;
}

代碼中，首先定義了一個img-wrap類，用于包裹需要懸掛效果的圖片。設置position:relative屬性，使其成為相對定位，這樣可以讓其內部的絕對定位元素相對于它的位置進行定位。同時，設置display:inline-block屬性，讓元素呈現在一行中，并設置margin屬性，讓其與其他元素保持一定間距。接下來，設置img-wrap類的寬度和高度。

接著，使用:hover偽類，在鼠標懸浮的時候設定.img-overlay的透明度從0到1，這樣就實現了鼠標懸浮時懸掛效果的出現。

然后，使用絕對定位，將.img-overlay層放置在.img-wrap內部。設置其寬度和高度都為100%，以撐滿.img-wrap。同時，設定其初始透明度為0，并添加了動畫效果。這樣，當鼠標懸浮時，透明度就會從0變為1，實現懸掛效果的展示。

在.img-overlay層內部，使用:before偽元素，來添加一個圖片作為懸掛效果的圖標。首先，使用絕對定位，將其放置在層的正中央。然后，設定其寬度和高度，并設置背景圖片的位置和尺寸，完成懸掛效果的設計。

通過這一段代碼的學習，我們可以掌握使用CSS實現懸掛圖片效果的技巧，為我們的網頁設計增添美感和視覺效果。