css hover遮罩层效果

运用css方法达到鼠标移入文字消失，图片占满，遮罩层展示。
用到了transition （过渡）、 position（定位）、opacity（透明度）等

效果图

html


<div class="hot-product3"><a href="javascript:;" target="_blank" class="item"><div class="img"><img src="../images/bg.png" /></div><div class="blue f18 name disnone">标题</div><div class="disnone"><ul class="ul-cls detail-info"><li><span>占行文字</span></li></ul></div><div class="detail"><div class="blue f18 name">内标题</div><ul class="ul-cls detail-info"><li><span>占行文字</span></li></ul><div class="info">文字描述</div><div class="text-center link">了解详情</div></div></a>
</div>

css

body {color: #333;font-size: 14px;font-family: Microsoft YaHei;line-height: 1;list-style-type: none;
}
html {-webkit-text-size-adjust: 100%;
}a {text-decoration: none;color: #333;
}.blue {color: #3e71ea;
}.f18 {font-size: 18px;
}.text-center {text-align: center;
}.item {width: 285px;position: relative;overflow: hidden;height: 305px;background-color: #fff;
}.img {width: 285px;height: 195px;overflow: hidden;
}.img img {border-style: none;max-width: 100%;
}.name {padding: 22px 0 14px 25px;
}.ul-cls {margin: 0;padding: 0;
}.detail-info {display: flex;align-items: center;margin: 15px 25px 25px;
}.detail {left: 0;color: #fff;right: 0;bottom: -305px;opacity: 0;min-height: 271px;padding-top: 38px;position: absolute;transition: all .2s linear;background-color: rgba(0,0,0,.6);
}.info {padding: 0 25px;line-height: 20px;
}.detail .link {color: #fff;width: 141px;height: 34px;margin: 40px auto 0 auto;line-height: 34px;background-color: #3e71ea;
}.item:hover .disnone {display: none;
}.item:hover .img {height: 305px;
}.item:hover .detail {bottom: 0;opacity: 1;
}.item:hover .detail .blue {color: #fff;
}

如此就完成hover效果，鼠标移入遮罩层匀速显示出来。

css hover遮罩层效果相关推荐

CSS伪类实现遮罩层效果
CSS中的伪类可以更方便的帮助我们定义过渡效果,这里,我们详细介绍一下利用:hover实现遮罩层效果.:hover是指当鼠标悬停在元素上时所发生的效果. 实现遮罩层的步骤需要两个相等大小的元素. 两 ...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别、遮罩层效果、三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器兄弟选择器属性选择器伪类选择器其他伪类选择器类元素选择器直接选择器否定选择器伪元素 :after清除浮动 :before和:after 用来写小三角形首字母 ...
纯css制作遮罩层特效
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做.下面是用纯css制作的遮罩层效果: 原始页面,放了三张图片: ...
纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
CSS3实现遮罩层效果
CSS3实现遮罩层效果第一步.创建外层遮罩先写个大盒子 <div id="box"></div> 再把盒子设置为固定定位,top.right.botto ...
js ajax 点击遮罩层,jQuery弹出遮罩层效果完整示例
本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ...
CSS半透明遮罩层 and 定位
html  <div class="mask" style="display: none;"></d ...
CSS实现鼠标悬浮时背景图片拉近且增加遮罩层效果
效果预览点击查看效果我们在浏览网站时会发现有一些图片在鼠标悬浮在上时会有放大拉近的效果. 想要实现这个效果有两种方法,第一种方法是控制背景图片,第二种方法是控制插入的图片,我们这里介绍第一 ...

css hover遮罩层效果

效果图

html

css

css hover遮罩层效果相关推荐

最新文章

热门文章