HTML 图片点击放大效果代码示例

CSS 代码：

.image { position: relative; width: 100%; height: 100%; }

.image img { display: block; width: 100%; height: 100%; }

.image:hover img { transform: scale(1.1); transition: transform 0.3s ease-in-out; cursor: pointer; }

解释：

1. 在 HTML 中，我们创建了一个包含图片的 div 元素，其中图片的路径为 'your-image.jpg'，并且我们添加了一个 alt 属性，以便屏幕阅读器可以读出图片的说明。

2. 在 CSS 中，我们将包含图片的 div 元素设置为相对定位，并设置其宽度和高度为 100%。

3. 我们将图片的样式设置为块级元素，使其充满整个 div 元素，并设置其宽度和高度为 100%。

4. 我们使用 :hover 伪类选择器来设置鼠标悬停在图片上时的样式。我们使用 transform 属性来放大图片（scale(1.1) 表示放大到原来的 1.1 倍），并使用 transition 属性来添加动画效果。我们还将鼠标指针设置为指向手形，以表明图片可以被点击放大。

这段代码可以让图片在页面上点击放大，但是如果你需要更复杂的效果，你可以使用 JavaScript 和其他 CSS 技术来实现更高级的功能。