CSS实现鼠标移动到图片上显示遮罩层效果

这是一张图片,我希望鼠标移动到上面的时候显示一个遮罩层,层级上有两个按钮,一个查看,一个删除

首先是要写一个大盒子包裹两个部分,一个是图片部分,一个是遮罩层部分,然后再用CSS样式控制

复制代码
 <el-form-item label="附件">
    <img v-if="imageUrl" :src="imageUrl" class="avatar-uploader avatar-img">
    <div v-if="imageUrl" class="img-icon">
       <i class="el-icon-zoom-in" @click="seeImg"></i>
       <i class="el-icon-delete" @click="deleteImg"></i>
    </div>
  </el-form-item>

然后遮罩层用定位的方式,定在图片上,设置好背景色和大小,一开始的时候透明度opacity设置为0,这样就看不到上面的遮罩层

复制代码
.img-icon {
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  top: 0px;
  left: 0px;
  width: 180px;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
  opacity: 0;
  color: #ffffff;
  text-align: center;
  i {
    display: inline-block;
    width: 40px;
    height: 40px;
  }
}

然后当鼠标移动到图片上的时候,将遮罩层的透明度设置不为0,这样遮罩层就显示出来了

复制代码
.img-icon:hover {
  opacity: 0.8;
}
相关推荐
~无忧花开~4 分钟前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
程序猿小D11 分钟前
【完整源码+数据集+部署教程】【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
前端·yolo·计算机视觉·目标跟踪·数据集·yolo11·价格标签检测系统源码
吴鹰飞侠19 分钟前
AJAX的学习
前端·学习·ajax
JNU freshman25 分钟前
vue 技巧与易错
前端·javascript·vue.js
北冥有鱼29 分钟前
Vue3 中子组件修改父组件样式之—— global() 样式穿透使用指南
vue.js
落一落,掉一掉33 分钟前
第十二周 waf绕过和前端加密绕过
前端
Asort33 分钟前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
Coffeeee42 分钟前
Labubu很难买?那是因为还没有用Compose来画一个
前端·kotlin·android jetpack
我是日安42 分钟前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
开源之眼44 分钟前
深入理解 JavaScript 报错:TypeError: undefined is not a function
前端·javascript