CSS3鼠标悬停图片切换是一种非常基础且常用的前端效果，通过在标签上添加:hover伪类来实现。

首先，在HTML代码中添加要显示的图片：

<div class="image">
<img src="img1.jpg" alt="" id="img1">
<img src="img2.jpg" alt="" id="img2">
</div>

其中image类用于包裹图片，img1和img2分别代表两张不同的图片，我们需要设置其中一张默认显示。

.image img {
display: none; /* 隐藏所有图片 */
}
#img1 {
display: block; /*设置一张默认显示的图片 */
}

接下来就是关键的鼠标悬停效果的实现：

#img1:hover ~ #img2 {
display: block;
}
#img2:hover {
display: block;
}
#img2:hover ~ #img1 {
display: none;
}

当鼠标悬停在img1上，通过CSS选择器：hover伪类和~兄弟元素选择器，将img2设置为显示，并将img1隐藏；当鼠标悬停在img2上，只需要将img1隐藏并将img2显示即可。

以上就是CSS3鼠标悬停图片切换的基本实现方法，可以根据需要进行细节调整，让效果更加优美。