默认效果图：
鼠标hover效果：
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 *{margin:0;padding:0;box-sizing:border-box;} 9 .wrap{margin:300px auto;width:284px;position:relative;} 10 a{width:284px;height:290px;display:block;border:1px solid #ccc;overflow:hidden;} 11 i{display:none;position:absolute;top:50%;left:50%;margin-left:-30px;margin-top:-30px;background:url(btn.png) no-repeat center center;width:60px;height:60px;} 12 img{width:100%;height:100%;transition:transform 0.2s;} 13 a:hover{border-image:url(bg.png) 1;} 14 a:hover i{display:block;} 15 a:hover img{transform:scale(1.1,1.1);} 16 </style> 17 <body> 18 <div class="wrap"> 19 <a href=""> 20 <img src="img.png" alt="" /> 21 <i></i> 22 </a> 23 </div> 24 </body> 25 </html>