效果图:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> .imgdiv{ position: relative; width: 280px; height: 279px; overflow: hidden; box-shadow: 5px 5px 10px #434343; /* transform: rotate(5deg); */ } img:hover{ border:none; transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transition: all linear .5s; -moz-transition: all linear .5s; /* Firefox 4 */ -webkit-transition: all linear .5s; /* Safari 和 Chrome */ -o-transition:all linear .5s; } .layer{ position: absolute; left: 0; bottom: 0; right: 0; top: 0; margin: auto; width: 200px; height: 200px; background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000); } .box{ position: absolute; left: 0; bottom: 0; right: 0; top: 0; margin: auto; width: 180px; height: 180px; background-color: #fff; background-clip: padding-box; } .top{ width: 150px; height: 70px; border-bottom: 3px solid #BEA971; margin-left: 10px; margin-top: 10px; text-align: center; } .bottom{ width: 150px; height: 70px; margin-left: 10px; margin-top: 10px; text-align: center; } </style> <link rel="stylesheet" href=""> </head> <body> <div class="imgdiv"> <img src="1.jpg" alt=""> <div class="layer"> <div class="box"> <div class="top"> <b>bold</b> <p>this is a pictrue</p> </div> <div class="bottom"> <b>bold</b> <p>this is a pictrue</p> </div> </div> </div> </div> </body> </html>