ant design图片hover蒙层_antd 图片预览指定蒙层-CSDN博客

本文记录了在Ant Design中如何自定义实现图片悬停时显示蒙层的效果，这种效果常用于图片操作场景。原有的Ant Design库并未提供默认的蒙层插件，但可以通过特定的写法创建一个悬浮的蒙层。文章还提到，这个方法可以被封装为一个独立的组件以备后续使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为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;
}