在浏览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>