CSS中的鼠標滑過效果是網頁設計中常見的效果之一。其中，鼠標滑過出現圖片的效果是實現比較簡單，但是能營造出很好的交互體驗。 首先，在html中需要定義一個圖片的容器，比如使用div標簽，代碼如下所示：

<div class="img-container">
<img src="placeholder.jpg" alt="圖片">
</div>

然后，在CSS文件中定義img-container的樣式，包括容器的大小、背景顏色等，代碼如下所示：

.img-container{
width: 200px;
height: 200px;
background-color: #eee;
}

接著，在CSS文件中再定義一個偽類:hover，表示當鼠標經過img-container時的效果。在:hover中定義背景圖片屬性，這個背景圖片會覆蓋原來的圖片，代碼如下所示：

.img-container:hover{
background-image: url("hover.jpg");
}

然后，再在鼠標離開容器時，恢復原來的背景顏色，代碼如下所示：

.img-container:hover{
background-image: url("hover.jpg");
}
.img-container{
width: 200px;
height: 200px;
background-color: #eee;
}

最后，將CSS文件鏈接到HTML文件中，即可顯示鼠標滑過出現圖片的效果。 總結一下，實現CSS中鼠標滑過出現圖片的效果需要定義一個圖片容器，使用:hover偽類定義鼠標滑過容器時的效果，使其覆蓋原來的圖片，再在鼠標離開容器時恢復原來的背景顏色。