今天我們來分享一下兩個基礎的CSS圖片切換效果，它們分別是hover效果和點擊效果。 首先是hover效果，當鼠標移動到圖片上時，會出現第二張圖片。我們可以通過以下代碼實現：

.img-container {
position: relative;
}
.img-container img:first-child {
position: absolute;
top: 0;
left: 0;
}
.img-container img:nth-child(2) {
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: opacity .3s ease-in-out;
}
.img-container:hover img:nth-child(2) {
opacity: 1;
}

我們首先設定了一個img-container容器，并通過定位將兩張圖片疊在一起。第一張圖片擁有絕對定位，并位于最上方。第二張圖片擁有opacity屬性0，使其隱藏。當鼠標移動到容器上時，我們將第二張圖片的opacity屬性變為1，從而讓它顯示出來。 接下來是點擊效果，當鼠標點擊圖片時，會出現第二張圖片。我們可以通過以下代碼實現：

.img-container-2 {
position: relative;
cursor: pointer;
}
.img-container-2 img:first-child {
position: absolute;
top: 0;
left: 0;
}
.img-container-2 img:nth-child(2) {
display: none;
position: absolute;
top: 0;
left: 0;
}
.img-container-2.active img:first-child {
display: none;
}
.img-container-2.active img:nth-child(2) {
display: block;
}

我們同樣設定一個img-container-2容器，并通過定位將兩張圖片疊在一起。第一張圖片擁有絕對定位，并位于最上方。第二張圖片擁有display:none屬性，使其隱藏。我們為容器添加了一個cursor:pointer屬性，讓鼠標變為手型。 當鼠標點擊容器時，我們給它添加一個active類名，并通過該類名控制第一張和第二張圖片的顯示與隱藏。即：當容器有active類名時，第一張圖片隱藏，第二張圖片顯示，反之則相反。 以上就是這兩種常見的CSS圖片切換效果，希望對大家有所幫助。