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;
}
相关推荐
剑亦未配妥9 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师15 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny0715 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy16 小时前
css的基本知识
前端·css
昔人'16 小时前
css `lh`单位
前端·css
Nan_Shu_61418 小时前
Web前端面试题(2)
前端
知识分享小能手18 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
2501_9181269118 小时前
用html5写一个flappybird游戏
css·游戏·html5
蚂蚁RichLab前端团队19 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光19 小时前
css之一个元素可以同时应用多个动画效果
前端·css