CSS 圖片過渡效果可以令網頁看起來更加生動有趣。下面我們來介紹一些實現這種效果的方法：

/* 過渡效果1：淡入淡出 */
img.fade {
opacity: 0.5; /* 初始透明度 */
transition: opacity 2s ease-out; /* 過渡時間和效果 */
}
img.fade:hover {
opacity: 1;
}
/* 過渡效果2：縮放 */
img.scale {
transform: scale(1); /* 初始大小 */
transition: transform 0.5s ease-in-out; /* 過渡時間和效果 */
}
img.scale:hover {
transform: scale(1.2); /* 放大到1.2倍 */
}
/* 過渡效果3：旋轉 */
img.rotate {
transform: rotate(0); /* 初始角度 */
transition: transform 0.5s ease-in-out; /* 過渡時間和效果 */
}
img.rotate:hover {
transform: rotate(360deg); /* 旋轉一圈 */
}

以上代碼中用到了transition屬性來定義過渡時間和效果，:hover偽類來表示鼠標懸停狀態。

使用這些方式可以讓網站更具視覺效果，也可以讓用戶更加愉快地瀏覽網站。不過需要注意的是，過多的過渡效果可能會降低網站的性能，因此需要謹慎使用。