运用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效果，鼠标移入遮罩层匀速显示出来。
