CSS是Web開發必不可少的一項技能，其中圖片hover是讓網頁更加生動活潑的一種效果。通過CSS的hover偽類，我們可以為圖片添加懸停效果。在這里，我們將學習如何使用CSS給圖片添加hover屬性。

img:hover{
border: 2px solid #F44336;
transform: scale(1.1);
}

在上面的代碼中，我們使用了:hover選擇器為圖片添加了hover效果。當用戶將鼠標懸停在圖片上時，圖片會增加紅色邊框，并通過transform屬性使其縮放為原大小的1.1倍。:hover選擇器是可以應用于多種HTML標記的，包括鏈接、按鈕和圖片等等。

另一個有趣的效果是用CSS hover制作幻燈片。當用戶將鼠標懸停在圖片上時，圖片會自動滑動到下一張圖片。我們可以使用CSS的transition和transform屬性來實現這種效果。

img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s ease;
}
div:hover img{
transform: translateX(-50%);
}
div{
position: relative;
width: 800px;
height: 400px;
overflow: hidden;
}
div img:nth-child(1){
left: 0%;
}
div img:nth-child(2){
left: 100%;
}
div:hover img:nth-child(1){
transform: translateX(-100%);
}
div:hover img:nth-child(2){
transform: translateX(0%);
}

在這里，我們使用了transform: translateX(-50%);來讓圖片向左移動它的整個寬度。我們還使用了nth-child（）選擇器來選擇每個幻燈片，使用制作CSS中的過渡動畫來平滑地滑動幻燈片。這個幻燈片效果不僅讓用戶可以在網頁上獲得更好的體驗，而且還能夠增加用戶對網站的粘性。