帘幕效果：鼠标放上去实现，会感觉一个像帘子一样的东西慢慢放下来（也可以升上去，把里面两个bottom换成top就可以了），这就是帘幕效果。
HTML:
<body> <div id="ml"><b>帘子</b></div> <div class="kk"> <div> <img src="https://pic.imgdb.cn/item/652541d4c458853aefb3d753.webp" alt=""> <p>海绵宝宝</p> </div> <div> <img src="https://pic.imgdb.cn/item/652541efc458853aefb3db23.png" alt=""> <P>蟹老板</P> </div> </div> </body>
css：
<meta charset="utf-8" /> <title></title> <style> #ml{ text-align: center; font-size: 30px; } .kk{ width: 1250px; height: 900px; } .kk>div{ width: 500px; height: 400px; float: left; margin: 30px 30px; position: relative; overflow: hidden; } .kk>div>img{ width: 100%; height: 100%; } .kk>div>p{ width: 100%; height: 100%; position: absolute; bottom: 100%; line-height: 400px; background-color: rgba(0, 0, 0, 0.5); font-size: 20px; color: white; text-align: center; transition: 2.5s; } .kk>div:hover>p{ bottom: 0; } </style>
