CSS 是前端开发中不可或缺的一部分，除了可以设置页面的样式，还可以让页面增添一些美观的效果。其中一个常见的效果就是点击图片放大，本文将介绍如何使用 CSS 实现这一效果。

/* CSS 代码 */
/* 创建一个class, 用于放大图片 */
.img-zoom {
/* 开启缩放效果 */
transition: all 0.5s ease;
/* 默认图片缩放大小 */
transform: scale(1);
}
/* 鼠标悬浮的时候，将图片放大 */
.img-zoom:hover {
/* 图片缩放大小 */
transform: scale(1.2);
}

如上所示，首先创建一个 class 用于实现图片缩放效果。然后在鼠标悬浮在图片上时，将图片放大。这里使用transform: scale()属性来实现图片的缩放。

接下来，将这个 class 应用到图片上：

如上所示，在img标签上添加 class，并设置图片的alt属性。其中图片的路径和属性值可以根据实际需要进行修改。

现在，当鼠标悬浮在图片上时，图片将会放大。使用 CSS 实现这一效果，不仅能够让页面增添动态和美观的效果，还能够提高用户体验，让用户更加方便地查看图片细节。