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

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

ant design图片hover蒙层相关推荐

android 圆形图片设置蒙层,Android引导蒙层，安卓新手引导图，引导图层，支持椭圆，圆形，矩形多种形状，一行代码快速搞定-Go语言中文社区...
新手引导视图,初次打开页面时显示. 支持圆形,椭圆,矩形等多种图形提示部分支持图片和文字提示先看效果图使用步骤. 使用起来特别简单,只需要把GuideView这个类复制到你的项目中就可以了 pa ...
ant design Modal遮罩层颜色加深解决方案
ant design Modal遮罩层颜色加深解决方案参考文章: (1)ant design Modal遮罩层颜色加深解决方案 (2)https://www.cnblogs.com/ruoshu ...
antd-img-crop，使用 Ant Design Upload 时裁切图片
介绍我们经常会遇到,需要上传固定比例图片的场景,比如更换头像图片等.这时就需要先对图片进行裁切,Ant Desgin 默认并没有提供这样的功能. antd-img-crop 是一个用于包装 Ant ...
ant design pro 修改logo图片名称位置
修改网页title的图片在:public/icons目录下更换 Ant Design Pro 的 logo 和名称: 位置:/public/favicon.png 只须将制作好的公司logo或者图片 ...
ant design 预览图片_Ant Design Pro上传图片
Ant Design Pro上传图片今天看了下Ant Design Pro上传图片的插件,感觉挺简单,也没有遇到太多问题,分享个大家!顺便记录下. 这里有个坑,主要文件命名的时候不要和保留关键词同名 ...
android 给图片蒙上蒙层_Android 新手引导蒙层效果实现代码示例
先上效果图: 这个效果一开始我是想直接让UI给个切图,后来发现这样不行,适配很差,达不到效果.所以就自己动手写代码,其实思路也很简单:在这个布局的父布局上面再手动添加一个view(通常LinearLa ...
onclick 获取点击之后的img 的id_前端，点击按钮跳出视频带蒙层，且视频永远居于屏幕中间...
1.前言: 做之前问了一下度娘,发现参考好像很少,就把我这个不成熟的代码放上来,做个参考(刚入行没多久,代码比较迷,接受批评) 2.实现效果: 视频点击播放前的区域效果点击这个button按钮图,视 ...
蒙层禁止页面滚动的方案
蒙层禁止页面滚动的方案弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是在蒙层出现的时候滚动页面,如果不加处理,蒙层底部的页面会开始滚动,实际上我 ...
#Ant Design# 设计规范设计原则
转载自:https://www.douban.com/note/643930072/ #Ant Design# 设计规范 01设计原则 1. 亲密性距离近-关联高-统一视觉单元,亲密性根本目的:实现 ...

ant design图片hover蒙层

ant design图片hover蒙层相关推荐

最新文章

热门文章