CSS是一種用于美化網站的樣式語言。其中，鼠標懸停效果常常被Web設計師廣泛使用。今天，我們來講一下如何用CSS實現鼠標懸停圖片上移的效果。

/*設置圖片的外觀*/
img {
width: 200px;
height: 200px;
margin: 10px;
border: 5px solid #333;
transition: all 0.5s ease;
}
/*設置鼠標懸停效果*/
img:hover {
transform: translateY(-10px);
border-color: #f00;
box-shadow: 0 0 10px #f00;
}

以上代碼先設置圖片的寬度、高度、外邊距和邊框樣式。transition屬性是用來設置動畫效果的特性，這里我們讓它的all屬性值變化需要花費0.5秒，并且變化過程設置為緩動。接著，我們設置當鼠標懸停在圖片上時需要變換的屬性。其中，translateY()函數可以將元素在垂直方向上移動，這里的值為負值，表示向上移動10像素。

我們再看一下hover偽類選擇器的用法，即在選擇器后面添加:hover，表示當鼠標懸停在元素上時將會應用該選擇器。我們利用它改變了圖片的變換、邊框顏色和陰影。通過這樣的設置，我們成功地實現了圖片的鼠標懸停上移效果。

至此，我們已經講解了如何使用CSS實現鼠標懸停圖片上移的效果，希望能夠對大家有所幫助。