纯CSS图片预览:
显示效果：
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .Container{ 8 width: 90%;height: 300px;margin: 0 auto;border: 1px solid #FF6600; 9 } 10 .Container>a>img{ 11 width: 200px; 12 vertical-align: middle; 13 } 14 .Container>a{ 15 text-decoration: none; 16 display: block; 17 float: left; 18 margin: 100px 0 0 10px; 19 border: 1px solid red; 20 position: relative; 21 } 22 a.img span{ 23 position: absolute; 24 z-index: 999; 25 /*display: none;*/ 26 opacity: 0; 27 text-align: center; 28 top: 50%; 29 left: 50%; 30 transition: 1s all ease; 31 } 32 a.img span img{ 33 width: 400px; 34 } 35 .img:hover span{ 36 /*display: block;*/ 37 opacity: 1; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="Container"> 43 <a href="#" class="img"> 44 <img src="images/banner10.jpg" /> 45 <span> 46 <img src="images/banner10.jpg" /> 47 风景图1 48 </span> 49 </a> 50 <a href="#" class="img"> 51 <img src="images/banner11.jpg" /> 52 <span> 53 <img src="images/banner11.jpg" /> 54 风景图2 55 </span> 56 </a> 57 <a href="#" class="img"> 58 <img src="images/banner12.jpg" /> 59 <span> 60 <img src="images/banner12.jpg" /> 61 风景图3 62 </span> 63 </a> 64 </div> 65 </body> 66 </html>