滑鼠懸浮圖片特效
阿新 • • 發佈：2019-02-11
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景圖片懸浮放大</title> <style> *{padding: 0px;margin: 0px;} .container{width: 80%;margin: 50px auto;color: #FFFFFF;} .item-wrap{position: relative;width: 290px;height: 280px;overflow: hidden;display: inline-block;} .item{width: 100%;height: 100%;transition: all 0.5s;} .item-wrap:hover .item{transform: scale(1.1);} .item-inner{width:100%;height:100%;background: rgba(0, 0, 0, 0) linear-gradient(10deg, rgba(0, 0, 0, 0.8) 15%, rgba(0, 0, 0, 0.15) 51%, rgba(0, 0, 0, 0) 70%) repeat scroll 0 0;} .item-txt{position: absolute;width:100%;bottom: 20px;} .container h2{padding-top: 100px;line-height: 50px;text-align: center;} .item:hover{transform: scale(1.2);} .list-item{position: relative;overflow: hidden;display: inline-block;} .list-item img{width: 100%;height: 100%;transition: all 0.5s;} .list-item .item-info{position: absolute;width:100%;bottom:0px;padding-bottom: 20px; background: rgba(0, 0, 0, 0) linear-gradient(10deg, rgba(0, 0, 0, 0.8) 15%, rgba(0, 0, 0, 0.15) 51%, rgba(0, 0, 0, 0) 70%) repeat scroll 0 0; } .list-item:hover img{transform: scale(1.1);} </style> </head> <body> <div class="container"> <div class="item-wrap"> <div class="item" style="background: url(img/jpk1.jpg) no-repeat center center;background-size: 100% 100%;"> <div class="item-inner"></div> </div> <div class="item-txt"> <h2>Notice:first message</h2> <p>Pay attention,please！This is the first message for you.</p> </div> </div> <div class="item-wrap"> <div class="item" style="background: url(img/jpk2.jpg) no-repeat center center;background-size: 100% 100%;"> <div class="item-inner"></div> </div> <div class="item-txt"> <h2>Notice:first message</h2> <p>Pay attention,please！This is the first message for you.</p> </div> </div> </div> <!--================這是一道華麗的分割線============--> <div class="container"> <div class="list-item"> <img src="img/jpk1.jpg"/> <div class="item-info"> <h2>Notice:first message</h2> <p>Pay attention,please！This is the first message for you.</p> </div> </div> <div class="list-item"> <img src="img/jpk2.jpg"/> <div class="item-info"> <h2>Notice:Last message</h2> <p>Pay attention,please！This is the first message for you.</p> </div> </div> </div> </body> </html>
效果圖：
