CSS 圖片鼠標效果是 Web 設計中不可缺少的特效之一，它可以讓網站更加生動活潑，提升用戶體驗。在這篇文章里，我們為大家匯總了常見的 CSS 圖片鼠標效果，并附上了示例代碼供學習參考。

鼠標懸停放大

通過設置鼠標懸停時的圖片寬高，來實現放大效果。

.img:hover {
width: 120%;
height: 120%;
}

鼠標懸停透明度變化

通過設置鼠標懸停時的圖片透明度，來實現透明度變化效果。

.img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* 兼容IE8及以下 */
}

鼠標懸停變換顏色

通過設置鼠標懸停時的圖片背景顏色，來實現顏色變化效果。

.img:hover {
background-color: #F00;
}

鼠標懸停顯示標題

通過設置圖片的 title 屬性，并用 CSS 隱藏，在鼠標懸停時顯示標題。

.img {
position: relative;
}
.img span {
display: none;
position: absolute;
bottom: 0;
left: 0;
padding: 5px;
background-color: #000;
color: #FFF;
}
.img:hover span {
display: block;
}

鼠標懸停旋轉

通過設置圖片的 transform 屬性，在鼠標懸停時實現旋轉效果。

.img:hover {
transform: rotate(360deg);
}

以上就是 CSS 圖片鼠標效果的匯總，希望對大家有所幫助。需要注意的是，不同的圖片鼠標效果可能需要使用不同的 CSS 屬性及值，具體效果還需要根據實際情況和個人審美調整。