CSS圖片蒙版效果是一種常用的網頁特效，其實現原理是通過CSS技術對圖片進行遮罩和裁剪，以變換圖片的外觀呈現出不同的效果。以下是實現這種效果的基本CSS樣式：

.mask {
position: relative; /* 設置相對位置 */
display: inline-block; /* 設置為內聯塊級元素 */
overflow: hidden; /* 隱藏超出部分 */
}
.mask img {
position: absolute; /* 設置絕對定位，相對其父元素 */
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 填充父元素 */
opacity: 0.8; /* 設置透明度 */
}
.mask:hover img {
opacity: 1; /* 鼠標懸停時透明度為1 */
}
.mask:before {
content: ""; /* 偽元素，用于創建蒙版 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5; /* 蒙版透明度 */
transition: all 0.3s ease; /* 逐漸放大，使得底層圖片被完全覆蓋 */
transform-origin: center center; /* 設置旋轉中心 */
transform: scale(0); /* 初始狀態下蒙版不可見 */
}
.mask:hover:before {
transform: scale(1); /* 鼠標懸停時蒙版放大 */
}

以上代碼中，我們通過定義一個.mask類實現蒙版效果，并且通過:hover偽類實現鼠標懸停時顯示更改的效果。同時，我們使用:before偽元素來創建一個黑色半透明的蒙版，并且使用transform屬性逐漸放大。

最后，我們可以在HTML中使用該類來為圖片添加這種樣式：

<div class="mask">
<img src="image.jpg">
</div>

這樣，我們就可以輕松地為網頁中的圖片添加酷炫的蒙版效果了！