css如何实现鼠标移至图片上显示遮罩层及文字

 我来答
大宝妈谈教育
高粉答主

2020-05-14 · 关注我不会让你失望
知道小有建树答主
回答量:3306
采纳率:100%
帮助的人:54.5万
展开全部

1.首先看看HTML、一个img图像控件和一个带掩码样式的div,其中包含文本。这是蒙版层。

2.然后,查看样式定义。首先,查看图像容器和图像的样式,如图所示。这主要是准备我们的绝对定位口罩。

3.看看蒙版层的样式定义。代码如图所示。

背景:rgba(0,0,0,0.7);

透明度可以通过修改后面的0.7号来改变。1是完全不透明的,0是完全透明的。

4.然后添加用于鼠标移动的脚本代码来显示蒙版层。这段js代码是用jquery编写的,既方便又简单,所以我们首先介绍jquery脚本库。

5.添加mouseover和mouseout事件,主要是当鼠标移动到图像容器上时显示蒙版层,当鼠标移出时隐藏蒙版层。

6.刷新页面,您可以看到页面上显示的正常图片。

7.当我们把鼠标放在蒙版层上时,蒙版层就会显示出来。

肥仙女a
高粉答主

2020-05-09 · 我是游戏小达人,专注于分享游戏资讯。
肥仙女a
采纳数:477 获赞数:115604

向TA提问 私信TA
展开全部

方法一:鼠标移至图片上显示遮罩层及文字

1、先看下html,一个img图片控件,和一个有mask样式的div,里面有文字,这个就是遮罩层。

2、然后看下样式定义,先看下图片容器和图片的样式,如图,其中要注意的是img_container样式里定义了position:relative;这个主要是为了让我们的遮罩层做绝对定位做准备的。

3、再看下遮罩层的样式定义,代码如图,其中需要注意的是他的定位样式,我们设置了absolute的绝对定位,另外还有半透明的background样式设置:

background:rgba(0,0,0,0.7);

可以通过修改后面的0.7这个数字来改变透明度。1为完全不透明,0为完全透明。

4、接着添加鼠标移动上去显示遮罩层的脚本代码。这个js代码用jquery来写,方便,简单一点,所以我们先引入jquery脚本库。

5、添加mouseover,mouseout事件,主要就是当鼠标移动到图片容器上时,显示遮罩层,移出时,隐藏遮罩层。

6、刷新页面,可以看到现在页面上是正常显示的图片。

7、当我们把鼠标放上去时,就显示了遮罩层了。

方法二:鼠标移动至图片,图片慢慢放大显示遮罩层及文字

1、创建外层div和商品图片。

2、设置其样式,这里都是一些基本简单的属性。*{}里面的margin和padding都设置为0,是因为浏览器对元素之间有默认的属性,如果不消除,将影响我们后面css部分属性的设定。

3、运行,查看效果。可以看到,图片在div的上面,并且于div一样大。

4、为图片增加,鼠标移入时就放大的动画。这里运用到的是css3的transform属性,设置动画的一种方式,也比较方便快捷。对于scale缩放属性,代码上有详细注释。

5、运行,查看动画效果。可以看到,此时的图片是以图片中心放大,而超出了div的范围。那么我们接下来解决这一问题。

6、为外层div设置overflow属性,使超出的部分全都隐藏。

7、运行,查看动画效果。可以看到当鼠标移上去时,图片慢慢放大,但大小始终不变,就是div的大小,那么此时外层的div就起到了相框的效果。

8、接下来增加遮罩和文字。注意全部都放到div里面,图片、遮罩、文字都为同级元素,外层div为它们的父元素。

9、为外层div添加作为父元素的相对定位属性。为遮罩设置样式及动画。为文字设置样式及动画。如图,部分属性有注释,并解释了动画效果。

10、运行,查看最终效果。图片逐渐变大,黑色半透明遮罩逐渐显现,文字逐渐从下方移到图片中间位置,严格来说是移动到外层div的中间位置。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
lp5276159be1
推荐于2017-09-19 · TA获得超过2万个赞
知道大有可为答主
回答量:1万
采纳率:39%
帮助的人:4304万
展开全部
<style type="text/css">
.box{ 
  width:300px;
  height:200px;
  position:relative;
  background:red;
  cursor:pointer;
 }
.box .bmbox{ 
  width:300px; 
  height:30px; 
  background:black; 
  position:absolute; 
  bottom:0px; 
  left:0px; 
  display:none;
  font:12px/30px "宋体"; color:white;
  text-align:center;
 }
.box:hover .bmbox{
  width:300px; 
  height:30px; 
  background:black; 
  position:absolute; 
  bottom:0px; 
  left:0px; 
  display:block;
  font:12px/30px "宋体"; color:white;
  text-align:center;
 }
</style>
</head>

<body>
 <div class="box">
  <div class="bmbox">文字</div>
 </div>
</body>
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式