鼠标悬浮出现模态框覆盖和图标demo,纯css控制

效果图如下：

html:

<div style="width: 100%">
    <a>图片预览</a>
    <ul class="preview-pic">
    <li class="index-pic pic-del"><img src=${p.tmpURL} style="width: 80px;height:60px;" alt=""></li>
    <li class="index-pic pic-del"><img src=${p.tmpURL} style="width: 80px;height: 60px;" alt=""></li>
    <li class="index-pic pic-del"><img src=${p.tmpURL} style="width: 80px;height: 60px;" alt=""></li>
    <li class="index-pic pic-del"><img src=${p.tmpURL} style="width: 80px;height: 60px;" alt=""></li>
    </ul>
</div>

css:

 .preview-pic {
            margin: 15px 0 20px 10px;
            height: 60px;
        }
        .preview-pic li {
            display: inline-block;
            margin-right: 5px;
            position: relative;
            z-index: 1;
        }
        
      *********以下为重要代码***********
        .pic-del:after {
            content: "";
            background:rgba(0,0,0,0.4);
            z-index:1;
            -webkit-transition: 0.2s;
            -moz-transition: 0.2s;
            -ms-transition: 0.2s;
            -o-transition: 0.2s;
            transition: 0.2s;
            position: absolute;
            top:1px;
            right:1.2px;
            width: 5rem;
            height: 3.8rem;
            opacity: 0;
            filter: alpha(opacity=0);
        }
        .pic-del:hover:after {
            opacity: 100;
            filter: alpha(opacity=0);
            cursor: pointer;
        }
        .pic-del:before {
            content: "";
            display: inline-block;
            background-image: url(images/delete.png);
            background-size:cover;
            float: right;
            position: absolute;
            z-index: 5;
            top:16px;
            right: 1.8rem;
            width: 1.5rem;
            height: 1.5rem;
            opacity: 0;
            filter: alpha(opacity=0);
        }
        .pic-del:hover:before {
            opacity: 100;
            filter: alpha(opacity=0);
            cursor: pointer;
        }