CSS 圖片劃過遮層效果是一種非常實用的技巧，可以為網站提供更多的視覺效果和交互性。此技巧通過使用 CSS 代碼來創建一個遮罩層，來隱藏或顯示圖片的不同部分，從而實現視覺效果的變化。下面來看看如何使用 CSS 來創造一個圖片劃過遮層效果。
首先，我們需要準備一個 HTML 文件來放置我們的圖片。例如，我們可以使用以下代碼：
```html
鼠標放上去試試
```
在這個例子中，我們使用一個 `div` 元素來包含我們的圖片和遮罩層。我們還為這個 `div` 元素添加了一個 `class`，以便我們可以使用 CSS 樣式來控制它的外觀。
接下來，我們需要添加 CSS 樣式來控制遮罩層的外觀。我們可以使用以下代碼：
```css
.image-box {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.5s;
}
.image-box:hover .overlay {
opacity: 1;
}
```
在這個樣式示例中，我們使用 `position: relative` 來確保遮罩層定位在圖片的上方。我們還使用 `position: absolute` 來使遮罩層覆蓋整個圖片。接著我們定義 100% 的寬度和高度，以便遮蓋整個圖片。我們還為遮罩層設置了一個半透明的黑色背景顏色。最后，我們使用 `opacity` 屬性并添加了一個漸變效果，以確保遮罩層在 `hover` 狀態下可以逐漸出現。
引用實例：
```pre
鼠標放上去試試
```
通過使用上述樣式代碼，當鼠標懸停在圖片上時，遮罩層將淡入并完全遮蓋圖片。這是一個非常實用的效果，可以使網站更加生動、有趣和具有吸引力。