css遮罩层效果
在浏览b站网页版首页时，我们会看到这样的效果
将鼠标移动到图片上后
我们可以使用css实现这一效果
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>#mask_layer{width: 206px;height: 116px;overflow: hidden; position: relative;background-image: url(img/mianyang.jpg);background-size: 206px 116px;}.masked{height: 116px;z-index: 2;color: #fff;width: 100%;position: absolute; top: 50px;left: 0;transition:top .2s;padding: 26px 10px 10px;}.masked:hover{top: 0px;position: absolute;background: rgba(0,0,0,.7)}.title:hover{}.title{font-size: 14px;line-height: 18px;height: 18px;color: #fff; margin-bottom: 6px;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;font-weight: 500;}.up{font-size: 12px;color: #e0e0e0;margin-bottom: 3px;}.play{font-size: 12px;color: #e0e0e0;margin-bottom: 3px;}.shao{position: absolute;top: 80px;left: 170px;}</style></head><body><div id="mask_layer"><div class="masked"><p title="论：如何把4块钱的虾，炸成1000块的样子"class="title">论：如何把四块钱的虾，炸成1000块的样子</p><p class="up"><i class="pic"><img src="img/UPzhu.png"width="15px"height="15px" ></i>绵羊料理</p><p class="play">25.9万播放</p><i class="pic shao"><img src="img/shaohouzaikanx.png"width="30px"height="30px" ></i></div></div></body></html>
