ant design图片hover蒙层

因为ant design没有默认的蒙层插件，只有图片上传的头像上传类型存在悬浮显示蒙层的样式，所以我单独写了一个，悬浮显示蒙层用来操作的，很多场景都可以用到，这里记下来。
原来样式：

鼠标悬停样式：

下面是写法：

//jsx部分
  <div className={ styles.info}>
       <span className={styles.actions}>
           <Icon type='eye'/>
           <Icon type='delete'/>
         </span>
</div>

//css部分

.info {
  box-sizing: content-box;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0px;
  right: 0px;
  overflow: hidden;
  &:before {
    content: ' ';
    position: absolute;
    z-index: 1;
    background-color: fade(#000, 50%);
    transition: all 0.3s;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}


.actions {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s;
  i {
    z-index: 10;
    transition: all 0.3s;
    cursor: pointer;
    font-size: 16px;
    width: 16px;
    color: rgba(255,255,255,0.7);
    margin: 0 4px;
    &:hover {
      color: rgba(255,255,255,1);
    }
  }
}

.info:hover {
  &:before {
    opacity: 1;
  }
  .actions{
    opacity: 1;
  }
}

.info:hover + .actions,
.actions:hover {
  opacity: 1;
}

当然为了下次方便你也可以当成一个独立的组件来使用