猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

css如图，鼠标指上之后，下面透明遮罩上拉一小块，显示详细信息是如何实现的？

https://img4.mukewang.com/5c7cdcc50001220203590462.jpg

https://img1.mukewang.com/5c7cdcc7000119f703520433.jpg

慕桂英3389331
浏览 733回答 2
2回答

杨魅力

大致原理是一样的<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; &nbsp; <meta http-equiv="X-UA-Compatible" content="ie=edge">&nbsp; &nbsp; <title>Document</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; .imgbox,.imgbox2{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 140px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position:relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; img{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:100%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .imgbox:after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: rgba(0, 0, 0, 0.5);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: attr(data-text);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition:all 0.4s ease;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(-100%);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #FFF;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .imgbox2:after,.imgbox2:before{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: rgba(0, 0, 0, 0.5);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition:all 0.4s ease;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #FFF;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .imgbox2:before{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(-100%);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .imgbox2:after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom:0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(100%);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .imgbox:hover:after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(0);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .imgbox2:hover:after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(0);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .imgbox2:hover:before{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(0);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div class="imgbox" data-text="我是文字">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="./2.jpg" alt="">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="imgbox2" data-text="我是文字">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="./2.jpg" alt="">&nbsp; &nbsp; </div></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript