CSS 圖片鼠標放上去變色是網頁設計中常用的交互效果之一。這個效果可以通過CSS的:hover偽類來實現，下面具體介紹一下該效果的實現方法。

img:hover {
filter: grayscale(40%); /* 將圖片灰度化 */
transition: all 0.5s ease-in-out; /* 添加漸變效果 */
/* 注意：如果想讓鼠標移開后圖片恢復原色，可以添加如下代碼 */
/* filter: grayscale(0%); */
}

上述代碼中，我們通過:hover偽類來選中鼠標放到了圖片上的狀態。接著，我們使用filter屬性將圖片灰度化，可以使圖片變暗一些，同時也更符合鼠標懸停后的變色效果。同時，可以通過transition屬性添加變化的漸變效果，讓變化更加自然流暢。如需讓鼠標移開圖片時恢復原色，只需去掉注釋并修改該行代碼即可。

總的來說，CSS 圖片鼠標放上去變色是非常簡單易用的網頁設計效果，值得在實際項目中應用。