CSS 鼠标悬浮在图片上添加遮罩层

最新推荐文章于 2023-07-19 17:09:13 发布
最新推荐文章于 2023-07-19 17:09:13 发布
阅读量5.9k 收藏 37
点赞数 9
分类专栏： Vue CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwe122343/article/details/111225955
版权

先看效果：
一个大的图片墙在这里插入图片描述

鼠标移在图片上时，添加阴影效果+文字 / 图标
在这里插入图片描述

实现的关键是 CSS 的 opacity 和 hover，本文也主要介绍遮罩层的实现
HTML:

<div class="img_div">
   <img src="item.image_base64" @click=
最低0.47元/天 解锁文章
qwe122343
关注
  • 9
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
为图片添加遮罩层，并在鼠标悬停时切换遮罩层 css
zzzzoe_的博客
02-10 1243
效果图需求： 第一层遮罩层，背景色带文字 第二层遮罩层，隐藏，鼠标悬停时切换隐藏状态，并把第一层遮罩层隐藏 html结构： <div class="imgItem"> <img src="/public/Home/cases/case_01.jpg" /> <!-- 第一层遮罩层 --> <div class=...
CSS3带标题鼠标悬停遮罩层特效
07-24
CSS3带标题鼠标悬停遮罩层特效是一款简洁的图片列表布局，鼠标悬停图片带遮罩层标题内容显示效果。
css3遮罩层_CSS3鼠标hover图片超酷遮罩层动画特效
weixin_39524425的博客
11-29 351
这是一款CSS3鼠标hover图片超酷遮罩层动画特效。该特效中，当鼠标悬停在图片上面的时候，左右两个遮罩层会向中间收缩，最后合成一个完整的遮罩层。效果截图如下：HTML代码 Williamson We...
css一个图片上面加上遮罩蒙板，只修改img的样式不多写标签
肖肖肖丽珠的博客
08-15 1509
可以在伪类上添加图片的url}}content:'';top:0;}
利用css动画做遮罩
最新发布
weixin_65459869的博客
07-19 68
css 鼠标划过显示遮罩
queen_css的博客
08-16 891
opacity: 1;
php鼠标移动到图像,css-实现鼠标移至图片上显示遮罩层
weixin_36083698的博客
03-11 118
1、将遮罩层html代码与图片放在一个div我是放在 .img_div里。APictureoffood2、为图片及遮罩层添加样式图片：relative遮罩层：absolute使两者样式重合。鼠标不在图片上时，遮罩层不显示 .mask { opacity: 0; } 。.img_div{margin:20px400px0400px;position:relative;wid...
js基础【偶数倍背景相同颜色】
姗姗的博客
07-08 340
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
随鼠标的移入方向移入的遮罩层
06-29
http://www.xyhn.gov.cn/仿写的信用中国的效果（除了代码不一样，样式几乎一样），实现随鼠标的移入方向移入的遮罩层，CSS3+jQuery鼠标跟随图片悬停效果
html中鼠标悬停动效遮罩,纯CSS3鼠标hover图片条纹遮罩层动画效果源码
weixin_35156503的博客
06-02 275
.box{background: linear-gradient(#8E2DE2,#4A00E0);font-family: 'Merriweather Sans', sans-serif;border-radius: 7px;position: relative;overflow: hidden;}.box:before{content: "";background: -webkit-repea...
CSS3鼠标hover图片遮罩层样式
12-13
这是一款CSS3鼠标hover图片遮罩层样式。该鼠标hover动画在鼠标悬停到图片上面的时候，遮罩层以两个不规则图形出现，并显示描述文字和链接图标。
CSS实现鼠标悬浮出现遮罩层示例
11-21
先来一个简单的实现方法：复制代码代码如下:...style type=”text/css”> .mask-wrapper { position: relative; overflow: hidden; } .mask-inner { position: absolute; left: 0; top: 100%; width: 100%; height:
CSS3鼠标经过图片遮罩层代码.zip
07-11
CSS3鼠标经过图片遮罩层代码基于Bootstrap3.3.5制作，自适应分辨率，兼容PC端和移动端，CSS3鼠标悬停动画效果遮罩层。
js鼠标悬浮出现遮罩层的方法
10-24
主要介绍了js鼠标悬浮出现遮罩层的方法,以实例形式较为详细的分析了html及css页面布局与js特效的实现方法,是非常实用的技巧,需要的朋友可以参考下
css实现文字层浮在图片之上示例代码
09-25
字层浮在图片之在做一些当鼠标移到图片上显示描述信息功能是可以使用到，下面与大家分享个实例代码，有类型需求的朋友可以参考下哈，希望对大家有所帮助
背景图片hover加蒙层_css如何实现鼠标移至图片上显示遮罩层及文字
weixin_39597262的博客
12-22 2106
展开全部方法一：鼠标移至图片上显示遮罩层及文字1、先看下html，一个img图片控件，和一个有mask样式的div，里面有文字，这个就62616964757a686964616fe78988e69d8331333433633364是遮罩层。2、然后看下样式定义，先看下图片容器和图片的样式，如图，其中要注意的是img_container样式里定义了position:relative;这个主要是为了让...
CSS 鼠标悬浮在图片上添加遮罩层效果的实现
qq_40055200的博客
12-27 2413
实现的关键是 CSS 的opacity和hover，本文也主要介绍遮罩层的实现 父级元素 sub-module-type 要display: block;position: relative; 子级元素 mask 遮罩层 position: absolute;opacity: 0;pointer-events:none; 鼠标悬浮时 opacity: 1; <div class="sub-module"> <div class="sub-modul...
鼠标移入图片添加蒙版
若把你比作歌
05-15 587
HTML <div> <div class="pic" > <img src="../../../assets/pic120.png"> <a href="#"> <div class="mask" > <div class="mskButt" >
16种css3动画弹出遮罩层
ICode联盟
03-28 1142
下载地址 很多种弹出层的动画效果，窗口遮罩效果很漂亮，动画使用css3实现的各式各样的效果。 dd:
css鼠标悬浮出现遮罩层，鼠标离开遮罩层收起
07-12
你可以使用CSS的:hover伪类和transition属性来实现鼠标悬浮出现遮罩层，鼠标离开遮罩层收起的效果。以下是一种实现方法： HTML部分： ```html <div class="image-container"> <img src="image.jpg" alt="图片"> <div class="overlay"></div> </div> ``` CSS部分： ```css .image-container { position: relative; display: inline-block; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease; } .image-container:hover .overlay { opacity: 1; } ``` 这段代码中，我们首先创建一个包含图片和遮罩层的容器，使用相对定位（position: relative）使遮罩层相对于容器进行定位。遮罩层使用绝对定位（position: absolute）使其覆盖在图片上方，并设置宽度和高度为100%以填满容器。 遮罩层的背景色使用rgba()函数设置，其中最后一个参数表示透明度。初始时设置透明度为0，即完全透明。使用transition属性设置过渡效果，让透明度的变化在0.3秒内平滑进行。 接下来使用:hover伪类选择器，当鼠标悬浮在.image-container容器上时，.overlay遮罩层的透明度设置为1，即完全不透明。这样就实现了鼠标悬浮出现遮罩层的效果。 请注意，这只是一种基本的实现方式，你可以根据需要进行样式的调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值