純CSS鼠標經過遮罩，也被稱為圖像透明度遮罩，是一種在鼠標滑過時顯示不同的圖像的簡單方法。通過使用CSS，您可以控制圖像的透明度，以便只顯示您想要的區域。

.mask{
position: relative;
display: inline-block;
}
.mask img{
display: block;
width: 100%;
height: auto;
}
.mask:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
transition: all 0.5s ease;
}
.mask:hover:after{
opacity: 0.5;
}

要使用純CSS創建鼠標經過遮罩，您需要創建一個包含兩個元素的容器。

第一個元素是包含圖像的容器。這應該是一個塊元素，例如div或img。

第二個元素是用于創建遮罩的偽元素。這應該是絕對定位，并且應具有與其父元素相同的寬度和高度，以便遮罩圖像。您可以使用背景圖像或顏色等方式定義遮罩效果。

通過將偽元素的透明度設置為0并為其添加過渡效果，然后將其設置為鼠標滑過時的透明度，即可創建透明度效果。這通常可以在:hover偽類中完成。

使用CSS遮罩技術可以輕松實現許多經典設計，例如圖像翻轉，鼠標經過時顯示文本，甚至可以在錨點鏈接中使用它們。