CSS3是網頁設計中常用的技術，其中鼠標經過遮罩層效果十分常見。具體實現方法如下：

/* HTML代碼 */
<div class="mask">
<img src="xxx.jpg" alt="圖片">
<div class="shade"></div>
</div>
/* CSS代碼 */
.mask {
position: relative;
}
.mask img {
display: block;
}
.mask .shade {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity .3s ease-in-out;
}
.mask:hover .shade {
opacity: 1;
}

其中，HTML代碼中使用了<div>標簽包裹圖片，同時添加了一個名為“shade”的遮罩層。

CSS代碼中，設置了遮罩層的基本樣式，將其設為全黑，半透明，并且在鼠標經過時，將透明度設為1，以達到慢慢顯示的效果。

有了這個效果，我們可以在圖片上添加文字或者其他元素，當鼠標經過時，會自然而然地顯示出來，加強用戶體驗。