前端案例实战/鼠标移上图片放大(css)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery垂直三级导航</title>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
.box{
width: 900px;
height: 700px;
background: lightgreen;
margin: 0 auto;
border-radius: 4px;
}
.pic{
width: 300px;
height: 200px;
margin: 100px auto;
float: left;
}
.pic img{
border-radius: 6px;
transition: all 0.5s; /* 定义图片放大过程的秒数 */
}
.pic:hover img{
height: 200px;
width: 300px;
transform: scale(1.5);
box-shadow: 1px 10px 10px hotpink;
border: 4px dashed #616161;
}
</style>
<script>
</script>
</head>
<body style="background: #eee;">
<div class="box">
<div class="pic">
<img src="08.jpg" width="300" height="200">
</div>
<div class="pic">
<img src="08.jpg" width="300" height="200">
</div>
<div class="pic">
<img src="08.jpg" width="300" height="200">
</div>
<div class="pic" style="margin: 0px auto;">
<img src="08.jpg" width="300" height="200">
</div>
<div class="pic" style="margin: 0px auto;">
<img src="08.jpg" width="300" height="200">
</div>
<div class="pic" style="margin: 0px auto;">
<img src="08.jpg" width="300" height="200">
</div>
</div>
</body>
</html>
