CSS可以實現很多有趣的效果，其中之一就是鼠標滑過圖片下滑的效果。下面我們就來學習如何實現吧。

/* 讓圖片蒙上一層半透明的遮罩 */
img {
position: relative;
}
img::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
opacity: 0;
transition: opacity .3s ease;
}
/* 鼠標懸浮時，遮罩透明度變為1，實現下滑的效果 */
img:hover::before {
opacity: 1;
}

在上面的代碼中，我們通過偽元素before給圖片添加了一個半透明的遮罩，使圖片變得不那么突兀。然后，當鼠標懸浮在圖片上時，我們通過hover選擇器來控制遮罩的透明度從0變為1，就實現了圖片下滑的效果了。

那么，這個效果有什么實用價值呢？比如說，在網站中，我們可能需要對一些重要的圖片做特殊標記，讓它們更加引人注目。這時候，通過鼠標滑過圖片下滑的效果，就可以讓這些圖片更加醒目，吸引用戶的注意力。

總之，CSS提供了豐富的效果實現方式，我們可以隨意發揮，創造出各種有趣的效果。