当鼠标滑过图片块，图片放大，划出恢复大小。 效果图如下 HTML代码如下：
<div class="box"> <ul> <li><img src="../images/photo01.jpg" alt=""></li> <li><img src="../images/photo02.jpg" alt=""></li> <li><img src="../images/photo03.jpg" alt=""></li> <li><img src="../images/photo04.jpg" alt=""></li> <li><img src="../images/photo05.jpg" alt=""></li> <li><img src="../images/photo06.jpg" alt=""></li> <li><img src="../images/photo07.jpg" alt=""></li> <li><img src="../images/photo08.jpg" alt=""></li> <li><img src="../images/photo09.jpg" alt=""></li> <li><img src="../images/photo10.jpg" alt=""></li> <li><img src="../images/photo11.jpg" alt=""></li> <li><img src="../images/photo12.jpg" alt=""></li> <li><img src="../images/photo13.jpg" alt=""></li> <li><img src="../images/photo14.jpg" alt=""></li> <li><img src="../images/photo15.jpg" alt=""></li> <li><img src="../images/photo16.jpg" alt=""></li> <li><img src="../images/photo17.jpg" alt=""></li> <li><img src="../images/photo18.jpg" alt=""></li> <li><img src="../images/photo19.jpg" alt=""></li> <li><img src="../images/photo20.jpg" alt=""></li> </ul> </div>CSS代码如下：
*{ margin: 0; padding: 0; } .box{ width: 616px; height: 390px; margin: 100px auto; } .box ul li{ width: 100px; height: 75px; list-style-type: none; float: left; border: 2px solid whitesmoke; padding: 7px; position: relative; } .box ul li img{ width: 100%; height: 100%; } .box ul li:hover img{ width: 200px; height: 150px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; padding: 2px; border: 2px solid black; }