当鼠标滑过图片块,图片放大,划出恢复大小。
效果图如下
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;
}