CSS是制作精美網頁的重要技術之一，其中鼠標點擊圖片效果是常見的應用之一。下面，我們來學習一下如何制作一個簡單的鼠標點擊圖片效果。

/*HTML*/
<div class="image">
<img src="example.jpg">
<div class="overlay"></div>
</div>
/*CSS*/
.image {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.overlay:hover {
opacity: 0.5;
background-color: #000;
}

在HTML中，我們先定義一個包含圖片和遮罩層的div元素，并設置圖片的src屬性。接著，在CSS中，我們設置圖片所在div元素為相對定位，方便后續設置絕對定位的遮罩層。我們為遮罩層設置了絕對定位，并且通過opacity屬性設置了初始時的透明度為0。同時，我們也為遮罩層定義了一個過渡效果，讓其在鼠標移動上去和離開時有一個平滑的過渡效果。在hover偽類中，我們設置透明度為0.5，并使用background-color屬性來設置遮罩層的背景色。

制作鼠標點擊圖片效果通過CSS實現非常簡單，只需要結合層疊樣式和偽類的特性即可輕松完成。在實際應用中，我們可以結合JavaScript來實現更復雜的效果，例如點擊后彈出圖集、跳轉到鏈接等等。