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实现点击图片变大的方法，希望能对你有所帮助！