今天我們來分享一款純 CSS 的懸停特效代碼。這個特效的實現很簡單，主要就是利用 CSS 中的 transition 屬性。 下面是代碼：

.hover-effect {
position: relative;
display: inline-block;
overflow: hidden;
}
.hover-effect img {
transition: transform 0.4s ease;
}
.hover-effect::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.4s ease;
}
.hover-effect:hover img {
transform: scale(1.2);
}
.hover-effect:hover::before {
opacity: 1;
}

代碼中，我們先定義了一個 .hover-effect 類，它是一個相對定位的塊元素，并且需要設置寬度和高度。緊接著是圖片樣式，利用 CSS3 中的 transition 實現了動畫效果。 我們還使用 ::before 偽元素，在懸停時淡化圖片并顯示出一層半透明的黑色遮罩，使得整個效果更加突出。 最后，在 .hover-effect:hover 選擇器中定義了一個 transform 屬性，當鼠標懸停在圖片上時，將其放大 20% 的比例。 如果您需要在網站上展示一些炫酷的特效，這種純 CSS 懸停特效就非常適合了。只需要簡單的 CSS 代碼就可以實現非常漂亮動態的效果，而且它不會像 JavaScript 那樣過于消耗資源，帶來更加流暢的用戶體驗。