鼠标指到图片上会向上移动

css样式:

.anlibox{ 1170px;position:relative; left:1.5%; top: 15%; margin:0 auto;}
.anli1{270px;}
.anli2{278px;}
.anli3{322px;}
.anli4{299px;}
.anli1 img, .anli2 img, .anli3 img, .anli4 img{transition: transform 0.5s; -webkit-transition: -webkit-transform 0.5s; /* Safari */ }
.anli1 img:hover, .anli2 img:hover, .anli3 img:hover, .anli4 img:hover{transform: translate(0px,-10px); -ms-transform: translate(0px,-10px); /* IE 9 */ -webkit-transform: translate(0px,-10px); /* Safari and Chrome */ }

html代码:

<ul class="oh pt10 pb50">
<li class="fl anli1"> <a rel="nofollow" href="photo.html"><img src="images/sj1.jpg" alt=""></a> <a rel="nofollow" href="photo.html"><img src="images/sj5.jpg" alt=""></a></li>
<li class="fl anli2"> <a rel="nofollow" href="photo.html"><img src="images/sj2.jpg" alt=""></a> <a rel="nofollow" href="photo.html"><img src="images/sj6.jpg" alt=""></a></li>
<li class="fl anli3"> <a rel="nofollow" href="photo.html"><img src="images/sj3.jpg" alt=""></a> <a rel="nofollow" href="photo.html"><img src="images/sj7.jpg" alt=""></a></li>
<li class="fl anli4"> <a rel="nofollow" href="photo.html"><img src="images/sj4.jpg" alt=""></a> <a rel="nofollow" href="photo.html"><img src="images/sj8.jpg" alt=""></a></li>
</ul>

原文地址:https://www.cnblogs.com/good2008/p/7417206.html