css中hover上滑
阿新 • • 發佈：2018-11-19
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <title>hover上滑</title> <style > .ImgBox { width: 130px; height: 130px; overflow: hidden; position: relative; } .ImgBox img{ width:100%; height: 100%; } .hoverImg { position: absolute; top:130px; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); } .ImgBox:hover .hoverImg{ top: 0; transition:all .3s ease-in-out .2s; } </style> </head> <body> <div class="ImgBox"> <div class="Img"> <img src="./images/15036308618249.jpg" alt=""> </div> <div class="hoverImg"></div> </div> </body> </html>