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

搜索这个效果的时候，很多人都是用css结合jQuery实现的，其实直接用css也可以实现哦~

效果前：

效果后：

代码：

<!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-Compatible" content="ie=edge"><title>css如何实现鼠标移至图片上显示遮罩层及文字</title><style type="text/css">html,body {width: 100%;height: 100%;margin: 0;padding: 0;}.container {display: flex;width: 100%;height: 100%;}.imgbox {position: relative;width: 220px;height: 200px;margin: auto;}.imgbox img {width: 220px;height: 200px;/* 转换速度 */transition: transform 0.5s ease;}.imgbox .mask {position: absolute;top: 0;left: 0;width: 220px;height: 200px;background: rgba(44, 44, 44, 0.6);color: #ffffff;opacity: 0;display: flex;font-size: 13px;/* 转换速度 */transition: transform 0.5s ease;}.mask span {margin: auto;}.imgbox a:hover .mask {opacity: 1;/* 增加元素的大小*/-webkit-transform: scale(1.1, 1.1);/* Safari */-ms-transform: scale(1.1, 1.1);/* IE 9 */transform: scale(1.1, 1.1);}.imgbox:hover img {-webkit-transform: scale(1.1, 1.1);/* Safari */-ms-transform: scale(1.1, 1.1);/* IE 9 */transform: scale(1.1, 1.1);}</style></head><body><div class="container"><div class="imgbox"><img src="assets/project1.jpg" /><a href="https://blog.csdn.net/Gladys_Huang"><div class="mask"><span>测试</span></div></a></div></div></body></html>

鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字相关推荐

css如何实现鼠标移至图片上显示遮罩层及文字
css如何实现鼠标移至图片上显示遮罩层及文字问题:一张图片当鼠标移动到上方时,会显示一个遮罩层,并且显示一些提示文字 html: <div class="contentimg&quo ...
css-实现鼠标移至图片上显示黑色半透明遮罩层，且不至于遮住图片上的超链接的方法
作为一个刚接触html和css的小白,总会遇到一些细节问题,在这里写下一个我遇到的小问题的解决方法,方便今后加深理解,更高效地学习. 一般情况下,让一个图片有超链接,可以用a标签把 img包住,但是要 ...
css怎样使鼠标移到div上显示手型
新建一个html文件,命名为test.html,用于讲解css怎样使鼠标移到div上显示手型. 在test.html文件内,创建一个div模块,下面将使用css设置该div的样式,实现鼠标移到div上 ...
html鼠标悬停直线变粗,鼠标悬停或经过对象时CSS样式变化设置
:hover伪类配置名目鼠标悬停颠末形态鼠标悬停或经由对象时CSS格局转变设置装备摆设,常见于对A超链接标签设置鼠标经由悬停时CSS名目. a:hover{ color:#F00; backgro ...
鼠标移到图片上，图片放大
.Nei1 img{ width: 122px; height: 89.6px; float: left; padding: 2px 2px; transition: all 0.6s; } .Nei ...
html 图片鼠标移上去点亮,CSS3 实现鼠标移到图片上时一片亮光一闪而过的效果...
01 效果描述 CSS3 实现鼠标移到图片上时一片亮光一闪而过的效果 02 效果图摘 03 关键代码 html: CSS: .hover14{ width:500px; float:left; } . ...
css3遮罩层_CSS3鼠标hover图片超酷遮罩层动画特效
这是一款CSS3鼠标hover图片超酷遮罩层动画特效.该特效中,当鼠标悬停在图片上面的时候,左右两个遮罩层会向中间收缩,最后合成一个完整的遮罩层.效果截图如下: HTML代码 Williamson ...
php主页显示商品预览图代码,jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能...
这次给大家带来jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能,jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能的注意事项有哪些,下面就是实战案例,一起来看一下. 1 . ...
C#使用Windows API实现桌面上的遮罩层(鼠标穿透)
C#实现实现桌面上的遮罩层(鼠标穿透)主要通过一下几个API函数来实现:GetWindowLong,SetWindowLong,SetLayeredWindowAttributes.其中有一个Wind ...

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

鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字相关推荐

最新文章

热门文章