<div class="img-box"> <img src="image-1.jpg" alt="图片1"> <img src="image-2.jpg" alt="图片2"> <img src="image-3.jpg" alt="图片3"> </div> <div class="img-preview"> <img src="big-image-1.jpg" alt="大图片1"> </div>
首先，在HTML中，需要创建一个包含多张图片的容器，如上面的div.img-box，这里使用了3张图片作为例子。同时，需要准备好展示大图片的容器，如上面的div.img-preview，这个容器一开始是隐藏的。
/* CSS 代码 */
.img-box img {
width: 150px;
height: 150px;
margin: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.img-preview {
display: none;
}
.img-preview img {
max-width: 100%;
max-height: 100%;
}接下来，在CSS中，需要给图片设置一些基本的样式，如上面的代码。这里为了能够使图片可以点击，需要将cursor属性设置为pointer。
在CSS中，可以通过:hover选择器实现鼠标悬停时的效果。将具有.img-box类的容器中的所有图片设置:hover效果，如下代码：
/* CSS 代码 */
.img-box img:hover {
opacity: 0.7;
}
.img-box img:hover + .img-preview {
display: block;
}
.img-box img:nth-child(1):hover + .img-preview img {
display: block;
}
.img-box img:nth-child(2):hover + .img-preview img {
display: none;
}
.img-box img:nth-child(3):hover + .img-preview img {
display: none;
}这里使用了+选择器，表示选择后面紧跟着的元素，如上面的.img-preview。当鼠标悬停在图片上时，会触发.opacity属性，让图片显示为半透明状态。同时，通过显示隐藏来切换展示img-preview的容器和其中的图片，需要根据具体情况来调节图片的显示和隐藏属性。
这里需要注意的是，在这个例子中，img-preview容器仅支持展示一张图片，可以将在HTML代码中的img标签的src属性替换成对应的大图来实现图片的切换。
以上就是使用CSS实现图片点击显示图片的方法，可以根据实际需要进行相应的调整，以适应不同的网页设计需求。