CSS圖片遮罩動態效果是一種很酷的效果，可以為網站增加視覺吸引力。下面我們來介紹如何使用CSS實現圖片遮罩效果。

/* HTML */
<div class="container">
<img src="image.jpg">
<div class="overlay"></div>
</div>
/* CSS */
.container {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.container:hover .overlay {
opacity: 1;
}

首先，我們需要將圖片和遮罩都放在一個容器（.container）中，然后設置該容器的position為relative，這樣遮罩就可以相對于該容器進行定位。

接著，我們創建一個遮罩層（.overlay），將其position設為absolute，并設置其top、left、width、height分別為0，1oo%，這樣就可以讓遮罩層完全覆蓋在圖片上了。我們的遮罩層使用rgba來實現半透明效果，以便可以看到圖片下面的一部分內容。我們還將遮罩層的opacity設置為0，表示一開始不可見。

接下來就是最重要的部分 – 當鼠標懸停在圖片上時，遮罩層的opacity就要變為1。這可以通過使用:hover偽類來實現。我們將.container:hover .overlay這對選擇器用于選中懸停在容器上的overlay層，然后將其opacity屬性設置為1，并添加了一個簡單的過渡效果以使其更加順滑。

至此，我們就完成了整個效果實現，如下圖所示：