CSS是一種前端開發語言，用于設計和布局網頁。在CSS中，我們可以使用圖片透明遮罩層來創建一種視覺效果，使圖片具有半透明或透明的外觀。這種效果可以用于創建滑過效果，使用戶可以懸停在圖片上并查看更多信息。

為了創建一個簡單的透明遮罩層，我們可以使用CSS層疊樣式表。以下是一個簡單的示例：

.image {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: opacity 0.5s ease;
background-color: black;
}
.image:hover .overlay {
opacity: 0.5;
}

首先，在HTML中添加包含圖片的div標簽，并為其添加一個類“image”。接下來，在CSS中，我們將Position屬性設置為“relative”，這將為遮罩層提供一個基準點。

在CSS中，我們在遮罩層上使用絕對定位。這將使遮罩層覆蓋Div上的所有內容。我們使用top、left、width和height屬性將遮罩層的大小設置為與Div相同，并將其背景顏色設置為黑色，以顯示透明度。

我們還在遮罩層上使用opacity屬性，將其設置為0。這將使遮罩層在默認情況下是完全透明的。我們還使用過渡屬性來創建一個平滑的效果，這樣當用戶將其懸停在圖片上時，遮罩層會逐漸變為半透明狀態。

在.div:hover .overlay聲明中，我們將遮罩層的opacity屬性設置為0.5。這會在用戶懸停在圖片上時觸發，使遮罩層逐漸變得半透明，以顯示圖片下面的內容。

使用以上代碼，您可以輕松創建一個簡單但有效的圖片透明遮罩效果。您還可以添加其他樣式和過渡屬性，以創建更多自定義效果。