在Web開發中，我們經常需要使用圖片作為網頁的一部分。而有時候，我們希望圖片在不同的交互狀態下發生變化，比如鼠標懸停在圖片上時，圖片會有一個放大的效果，或者點擊圖片時，圖片會有一個邊框。

為了實現這些效果，我們可以使用CSS的偽類選擇器來設置圖片的變化。比如，要實現當鼠標懸停在圖片上時圖片放大的效果，我們可以使用:hover偽類選擇器來設置：

img:hover {
transform: scale(1.1);
}

上面的代碼表示當鼠標懸停在img元素上時，將img元素的大小放大1.1倍。通過這種方式，我們可以實現許多圖片的交互效果。

除了使用偽類選擇器，我們還可以使用CSS的transition屬性來設置圖片變化的動畫效果。比如，要實現當鼠標懸停在圖片上時圖片有一個漸變的效果，我們可以使用transition屬性：

img {
transition: all 0.5s ease-in-out;
}
img:hover {
opacity: 0.8;
}

上面的代碼表示當鼠標懸停在img元素上時，將img元素的透明度改為0.8。而transition屬性則表示改變所有CSS屬性（比如大小、位置、顏色、透明度等）的變化都將在0.5秒內完成，并且使用緩動函數來使動畫更加自然。

總之，通過使用CSS的偽類選擇器和transition屬性，我們可以實現許多有趣的圖片交互效果，從而使我們的網頁更加生動、動態。