HTML 練習實現遮罩層
阿新 • • 發佈:2019-03-13
top 遮罩層 練習 :hover ctype bili title head bottom
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .left{ float: left; } .clearfix:after{ content: '.'; display: block; clear: both; visibility: hidden; height: 0; } .container{ background-color: red; } .container .item{ width: 180px; height: 150px; background-color: #303a40; border: 1px solid red; overflow: hidden; position: relative; } .container .item:hover{ border: 1px solid green; } .container .item .text{ display: none; } .container .item:hover .text{ display: block; } </style> </head> <body> <div class="container clearfix"> <div class="item left"> <div class="bg"> <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552466288&di=2833711b147f456e54b1e555602e4694&src=http://hbimg.b0.upaiyun.com/01f13dd8fcbfcfd38bd13f92cca49a0bd8ec434b12cea-0yEhtq_fw658" style="height: 150px; width: 180px;"> </div> <div class="text"> <div style="z-index:9; position:absolute; left:0; right:0; top:0; bottom:0; background-color: black; opacity:0.6;"></div> <div style="z-index:10; position:absolute; left:0; right:0; top:0; bottom:0;">1000</div> </div> </div> </div> </body> </html>
HTML 練習實現遮罩層