在網頁設計中，圖片鼠標劃過效果是很常見的一種交互效果。通過在圖片上設置特定的CSS樣式，當鼠標滑過圖片時能夠顯示出不同的效果，如變暗、變亮、放大等。下面我們就來了解一下CSS圖片鼠標劃過樣式。

//CSS代碼實現圖片鼠標劃過樣式
.image {
position: relative;
width: 200px;
height: 200px;
background-image: url("example.png");
}
.image:hover {
opacity: 0.5;
}

首先，我們需要使用一個帶有背景圖片的div元素，并設置其寬高，將圖片顯示在頁面上。在鼠標滑過該圖片時，我們可以給這個元素加上:hover偽類，然后設置其opacity屬性，即透明度。此時，圖片將會變得半透明，從而達到了一個簡單的鼠標劃過效果。

.image {
position: relative;
width: 200px;
height: 200px;
background-image: url("example.png");
transform: scale(1);
transition: all 0.3s ease;
}
.image:hover {
transform: scale(1.1);
}

除了改變元素透明度外，我們還可以使用CSS3中的transform屬性，實現一些更加生動的圖片鼠標劃過樣式。在上面的代碼中，我們通過設置transform的scale屬性，讓圖片在鼠標滑過的時候變大。同時，使用CSS3中的transition屬性，讓該動態變化呈現出平滑的效果（all表示所有屬性都進行動態變化，0.3s則是變化所需要的時間，ease則是變化的方式）。該代碼將會讓圖片在鼠標劃過時有一個放大的效果，增強網頁的美觀性。

總之，CSS圖片鼠標劃過樣式是網頁設計中不可忽視的一部分。通過選擇適合自己設計的樣式，可以大大增強頁面的美觀性，為用戶提供更好的體驗。