CSS圖片遮罩懸停是一種在網站上添加美觀效果的簡單方法。這種技術通常在圖片上覆蓋一個半透明層，實現一種視覺上的遮蓋效果。當鼠標指針經過圖片時，遮蓋層會漸變消失，從而呈現出原本的圖片。

實現該效果的方法，可以使用CSS中的偽類選擇器和基本屬性，以及一些簡單的HTML。在下面的例子中，我們將使用pre標簽來展示CSS代碼：

.image {
position: relative; /* 確保圖片與遮蓋層位置相近 */
}
.image:hover .overlay {
opacity: 0; /* 懸停時遮蓋層漸變消失 */
}
.overlay {
position: absolute; /* 確保遮蓋層與圖片重疊 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black; /* 遮蓋層的背景顏色為黑色，或者任何顏色都可以 */
opacity: 0.5; /* 定義為半透明層 */
transition: opacity .5s ease; /* 添加漸變效果 */
}

在上面的代碼中，我們首先定義了一個包含圖片的類名為“image”。隨后，我們添加了一個偽類選擇器，即在鼠標懸停時遮蓋層消失。最后，我們定義了類名為“overlay”的div元素，這是一個透明度和顏色均可單獨調整的半透明層。我們還為該層添加了一個漸變效果，使消失效果更加順暢。

使用該方法，您可以方便地定義圖片懸停效果，不僅使網頁更加美觀，也讓訪問者更好的理解您所展示的內容。