做项目时遇到这样一个需求：鼠标滑过图片显示遮罩层和小眼睛，点击图片可放大预览，一般情况下我们会直接使用UI组件来实现，但是今天我要说的是用CSS实现。
HTML代码如下（示例）：
// 遍历拿到图片列表<nz-image-group *ngFor="let img of gooddetail.certificate"><div class="play-img-box"><img class="play-img" nz-image [nzSrc]="img" alt="" /></div></nz-image-group>
CSS代码如下（示例）：
.play-img-box {cursor: pointer;position: relative;.play-img {display: block;width: 80px;height: 80px;margin-right: 16px;}&:hover::before {content: '';width: 14px;height: 14px;left: 33px;top: 33px;position: absolute;background-image: url(./eye.svg); // 小眼睛图标background-size: 100% 100%;// z-index: 1; // 设置眼睛图标在遮罩层的上方}&:hover::after {content: '';width: 80px;height: 80px;left: 0;top: 0;position: absolute;background: rgba(0, 0, 0, 0.2);pointer-events: none; // 因为有点击图片进行放大预览的需求，所以需要鼠标点击穿透，否则点击事件将在遮罩层上}}
实现效果：
