在網頁制作中，圖片切換是一個非常常見的效果。實現圖片切換的方法有很多，其中一種方式是使用CSS。 CSS圖片切換主要是利用CSS的“background-image”屬性和“:hover”偽類來實現。下面是一個簡單的例子：

<style>
img {
width: 200px;
height: 200px;
display: block;
margin: 0 auto;
background-image: url("image1.jpg");
background-size: cover;
}
img:hover {
background-image: url("image2.jpg");
}
</style>
<p>
<img src="" alt="image">
</p>

以上代碼中，首先使用“background-image”屬性設置了一張圖片作為img標簽的背景圖像。當鼠標移到img標簽上時，使用“:hover”偽類，更改背景圖像為“image2.jpg”。同時，為了讓圖片居中顯示，加入了一些CSS樣式，包括display: block屬性和margin: 0 auto屬性。 如果需要在圖片上添加一些文字說明，可以使用CSS的“:before”選擇器來實現。以下是一個完整的例子：

<style>
.photo {
width: 200px;
height: 200px;
display: block;
margin: 0 auto;
background-image: url("image1.jpg");
background-size: cover;
position: relative;
}
.photo:hover {
background-image: url("image2.jpg");
}
.photo:before {
content: "查看大圖";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 16px;
text-align: center;
}
</style>
<p>
<div class="photo"></div>
</p>

以上代碼中，首先將img標簽替換為一個div標簽，并加入一個class為“photo”。使用“position: relative”屬性設置div標簽的位置屬性為相對定位。 然后，在“:before”選擇器中，使用“content”屬性添加文字說明“查看大圖”。通過“position: absolute”屬性和“top”、“left”屬性將文字內容定位到圖片的中心。使用“transform: translate(-50%, -50%)”屬性可以將文字位置調整到正中央。為了讓文字更加清晰，加入了一些字體樣式，如“color”、“font-size”等。 最后，更改“<img>”標簽為“<div>”標簽，并加入自定義的class名“photo”。這樣就可以通過CSS來實現圖片切換同時顯示文字說明了。