【HTML+CSS】隐藏式上传图片的小模板

html：

<div class="photo-upload-img-wrap" style="width: 110px;float:left;margin-left:40px;position:relative">
                <div style="height: 136px; border:1px solid #CCCCCC;" class="thumbnail-headimg-div">
                    <img src="" style="width:100%;">
                </div>
                <div class="uplaod-mask" id="btn-upload-head-img" style="cursor:pointer;width:110px;height:136px;background-color:rgba(255,255,240,0.5);position:absolute;top:0;left:0">
                    <div style="margin:50% 10%">
                        <i class="layui-icon layui-icon-add-1"></i>
                        <span>上传照片</span>
                    </div>
                </div>
            </div>

CSS：

.uplaod-mask {
    display: none;
}
.photo-upload-img-wrap:hover .uplaod-mask{
    display: block;
}

效果：