CSS中可以通過:hover偽類選擇器實現當鼠標懸停在圖片上時，觸發變暗效果，給用戶一種良好的視覺反饋。

img:hover {
opacity: 0.5;
/* 或者使用filter */
filter: brightness(50%);
}

在上面的代碼中，我們使用了opacity屬性來設置圖片的透明度，值為0.5時相當于半透明效果，是一個不錯的暗化效果。也可以使用filter中的brightness屬性來設置圖片的亮度值，取值范圍為0~100%。

另外，還可以通過調整陰影的屬性來改變圖片的亮度，比如：

img:hover {
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

這個代碼中，我們使用了box-shadow屬性，其中inset表示陰影向內部生成，0 0表示陰影垂直和水平方向的偏移量，20px表示陰影的模糊半徑，rgba(0, 0, 0, 0.5)表示陰影的顏色為黑色，透明度為0.5。

不過需要注意的是，當使用box-shadow屬性時，圖片實際上并沒有變暗，只是產生了一種表面上的變暗效果。

總之，通過上述方法可以實現簡單而實用的圖片變暗效果，增強用戶體驗。