CSS是一種很強大的前端設計語言，利用它可以實現很多有趣的效果。其中之一就是懸停修改圖片。在這篇文章中，我們將學習如何利用CSS懸停來修改圖片。

首先，我們需要在HTML頁面中添加一個圖片元素，如下所示：

<img src="image.jpg" alt="My Image">

接下來，我們需要添加CSS樣式來修改這個圖片。我們可以利用:hover偽類來實現懸停時的修改效果。例如，我們想在鼠標懸停在圖片上時修改它的大小和邊框顏色，我們可以這樣寫CSS樣式：

img:hover {
width: 200px;
border: 2px solid red;
}

這段CSS樣式告訴瀏覽器，在鼠標懸停在圖片上時，將圖片的寬度改為200像素，并添加2像素的紅色邊框。

除了修改圖片的大小和邊框，我們還可以添加其他的效果。例如，在鼠標懸停在圖片上時改變它的透明度或應用一些動畫效果。下面是一些CSS樣式示例：

/* 改變透明度 */
img:hover {
opacity: 0.5;
}
/* 應用動畫效果 */
img:hover {
transform: scale(1.1);
transition-duration: 0.5s;
}

這些樣式都會在鼠標懸停在圖片上時生效，讓我們的頁面更引人注目。

總之，利用CSS懸停來修改圖片是一種簡單而又有效的方式，讓我們的網頁更有吸引力。希望這篇文章對你有所幫助！