CSS是前端開發中常用的樣式語言，不僅可以美化網頁，還能實現一些簡單的交互效果。下面我們來介紹一下如何使用CSS實現點擊圖片變大的效果。
<html>
<head>
<style>
.enlarge-img {
width: 200px; /* 圖片初始大小 */
transition: width 0.5s; /* 過渡效果 */
cursor: pointer; /* 鼠標懸停形態 */
}
.enlarge-img:hover {
width: 300px; /* 鼠標懸停后的大小 */
}
</style>
</head>
<body>
<img class="enlarge-img" src="https://example.com/image.jpg" alt="圖片">
</body>
</html>首先，我們給圖片添加了一個class名為"enlarge-img"，這樣方便我們在CSS樣式中選擇它。接著，我們設置了圖片的初始大小為200px，并對它的寬度屬性設置了過渡效果，這樣點擊圖片時就會有平滑的變化過程。我們還將鼠標形態設置為手型，增強了用戶交互性。
當鼠標懸停在圖片上時，我們將其寬度設置為300px，這是比初始大小更大的一個值，也是我們想要達到的效果。當移開鼠標，圖片會平滑地變回原來的大小，與初始大小相同。
以上就是使用CSS實現點擊圖片變大的方法，希望能對你有所幫助！
上一篇css實現照片重疊