<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; padding: 0; } .container { width: 1000px; height: 150px; margin: 0 auto; } ul { margin-left: 140px; } ul li { list-style: none; height: 150px; width: 200px; background-color: yellow; display: inline-block; margin-right: 20px; overflow: hidden; /*鼠标形状*/ cursor: pointer; } .b { width: 200px; height: 199.92px; position: relative; } .b img { width: 200px; height: 150px; transition: all .5s; transform: scale(1); } .b .con { position: absolute; bottom: 50px; font-size: 12px; color: #fff; transition: all .5s; padding-left: 10px; padding-right: 0; } .b .mask { width: 200px; height: 150px; background-image: linear-gradient( transparent, rgba(0, 0, 0, .5) ); opacity: 0; position: absolute; top: 0; transition: all .5s; } .b:hover .mask { opacity: 1; } .b:hover img { transition: all .5s; transform: scale(1.3); } .b:hover .con { transform: translateY(-300%); } .b:hover .con::after { content: "了解更多"; font-size: 10px; color: #ffffff; position: absolute; left: 50%; top: 50%; transform: translate(-140%, 150%); } </style> </head> <body> <div class="container"> <div class="a"> <ul> <li> <div class="b"> <img src="img/01.jpg" alt=""> <div class="con"> 这是什么这是什么这是什么 </div> <!--遮挡层--> <div class="mask"></div> </div> </li> <li> <div class="b"> <img src="img/01.jpg" alt=""> <div class="con"> 这是什么这是什么这是什么 </div> <!--遮挡层--> <div class="mask"></div> </div> </li> <li> <div class="b"> <img src="img/01.jpg" alt=""> <div class="con"> 这是什么这是什么这是什么 </div> <!--遮挡层--> <div class="mask"></div> </div> </li> </ul> </div> </div> </body> </html>