使用CSS實現點擊圖片更換圖片功能是一個常見的需求。通常，我們可以使用:active偽類或:hover偽類來實現此功能。

以下是一個具體的實現示例：

<style>
.image{
width: 200px;
height: 200px;
background-image: url("first-image.png"); /*默認顯示的圖片*/
background-size: cover;
cursor: pointer; /*鼠標懸停時變為手指形狀*/
}
.image:hover, .image:active{ /*鼠標懸停或點擊時的效果*/
background-image: url("second-image.png"); /*更換的圖片*/
transition: background-image 0.5s ease;
}
</style>
<div class="image"></div>

以上代碼中，我們首先定義了一個寬高為200像素的空div元素，并使用background-image屬性設置了默認顯示的圖片，通過cursor屬性讓鼠標懸停時變為手指形狀。使用:hover偽類和:active偽類來分別控制鼠標懸停和點擊時的效果，并使用transition屬性讓圖片更換的過程變得平滑。

以上就是實現點擊圖片更換圖片的CSS代碼，可以根據實際需求進行更改和優化。