鼠标悬停图片放大
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标经过图片</title>
</head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
*, *:before, *:after{ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
body ,a{ text-decoration:none; font-family: "微软雅黑"; }
.pic_hover{ width:1230px; margin:auto }
.pic_hover li{ list-style:none; float:left; margin:5px; position:relative; }
.pic_hover li .img{ width:400px; height:300px; overflow:hidden; display:block;}
.pic_hover li .img img{ width:100%; height:100%; transform: scaleY(1);transition: all 0.3s ease-in-out 0s;}
.pic_hover li .img:hover img{ width:120%; height:120%; margin-left:-10%; margin-top:-10%;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.text{ background:rgba(0,0,0,0.8); color:#fff; position:absolute; width:100%; height:100%; left:0; top:0; display:none; vertical-align:middle; font-size:30px; text-align:center; }
</style>
<body>
<div class="pic_hover">
<li><span class="img"><img src="images/1.jpg" title="" alt=""> </span><span class="text">标题1</span></li>
<li><span class="img"><img src="images/1.jpg" title="" alt=""> </span><span class="text">标题2</span></li>
<li><span class="img"><img src="images/1.jpg" title="" alt=""> </span><span class="text">标题3</span></li>
<li><span class="img"><img src="images/1.jpg" title="" alt=""> </span><span class="text">标题4</span></li>
<li><span class="img"><img src="images/1.jpg" title="" alt=""> </span><span class="text">标题5</span></li>
<li><span class="img"><img src="images/1.jpg" title="" alt=""> </span><span class="text">标题6</span></li>
</div>
<script type="text/javascript">
$(".pic_hover li").mouseover(function(){
$(this).find(".text").show();
$(this).find(".img img").css({"width": "120%", "height": "120%","margin-left":"-10%","margin-top":"-10%","transform:":"scaleY(1)","transition:":" all 0.3s ease-in-out 0s" });
});
$(".pic_hover li").mouseout(function(){
$(this).find(".text").hide();
$(this).find(".img img").css({"width": "100%", "height": "100%","margin-left":"0","margin-top":"0" ,"transform:":"scaleY(1)","transition:":" all 0.3s ease-in-out 0s" });
});
</script>
</body>
</html>
