鼠标放上去图片放大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
body{padding:0;margin:0;}
ul{list-style: none;}
.wap{width:900px;margin:10px auto;border: 1px solid #ccc;}
.wap ul li{margin:8px;float: left;box-shadow: 0px 0px 5px #ccc;background: #fff;padding: 12px;transition:1s;}
.wap ul li:hover{transform:scale(1.12);-webkit-transform:scale(1.12); z-index: 99;}
.clearfix:after{content:".";clear: both;height:0;visibility: hidden;display:block;}
.clearfix{*+height: 1%;}
</style>
</head>
<body>
<div class="wap clearfix">
<ul>
<li><img src="js_02.png" height="188" width="166"></li>
<li><img src="js_03.png" height="188" width="166"></li>
<li><img src="js_04.png" height="188" width="166"></li>
<li><img src="js_05.png" height="188" width="166"></li>
<li><img src="js_06.png" height="188" width="166"></li>
<li><img src="js_07.png" height="188" width="166"></li>
<li><img src="js_08.png" height="188" width="166"></li>
<li><img src="js_10.png" height="188" width="166"></li>
<li><img src="js_11.png" height="188" width="166"></li>
</ul>
</div>
</body>
</html>
效果图:
注释:
1.li{transition:1s;}
2.li:hover{transform:scale(1.12);-webkit-transform:scale(1.12); z-index: 99;}