CSS是網頁設計中非常重要的一部分，可以實現非常豐富的效果。在網頁設計中，有一種很常見的需求就是給圖片添加點贊功能。下面我們就來看看如何通過CSS來實現這個功能。

首先，我們需要將需要加點贊的圖片設置為一個div，然后在這個div中添加一個按鈕，用于用戶點贊。代碼如下：

<div class="image">
<img src="http://example.com/my-image.png" alt="My Image">
<button class="like-button">點贊</button>
</div>

接下來，我們通過CSS來實現點贊功能。我們可以通過偽類選擇器:hover來實現用戶鼠標懸停在圖片上時顯示點贊按鈕的效果。代碼如下：

.image {
position: relative;
display: inline-block;
margin: 10px;
}
.like-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
color: #333;
border: 1px solid #333;
padding: 5px 10px;
cursor: pointer;
display: none;
}
.image:hover .like-button {
display: block;
}

通過上面的CSS代碼，當用戶懸停在圖片上時，就會顯示一個點贊按鈕。當用戶點擊按鈕時，我們可以通過JavaScript來將點贊數+1并顯示給用戶。

總的來說，通過CSS來實現圖片上的點贊功能是非常簡單的。只需要對圖片使用偽類選擇器:hover，并添加一個點贊按鈕即可。希望本文能夠幫助大家更好地實現網頁設計中的點贊功能。