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;
}
相关推荐
paopaokaka_luck6 分钟前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
老坛00117 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00118 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾21 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐26 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价26 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花27 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101328 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树28 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜29 分钟前
跨平台UI自动化-Appium
前端