css实现图片放大
一、html代码
<!-- 鼠标移入时图片放大-->
<div class="body6">
<div class="imgbox1" >
<img class="body6p1"src="img/block3-1.jpg" alt="">
</div>
<div class="imgbox2">
<img class="body6p2"src="img/block3-2.jpg" alt="">
</div>
<div class="imgbox3">
<img class="body6p3"src="img/block3-3.jpg" alt="">
</div>
</div>
二、css代码
/*鼠标移入放大图片*/
.body6p1{
330px;
height: 220px;
cursor: pointer;
transition: all 0.6s;
}
.body6p1:hover{
transform: scale(1.1);
}
.body6p2{
330px;
height: 220px;
cursor: pointer;
transition: all 0.6s;
}
.body6p2:hover{
transform: scale(1.1);
}
.body6p3{
330px;
height: 220px;
cursor: pointer;
transition: all 0.6s;
}
.body6p3:hover{
transform: scale(1.1);
}
.imgbox1{
330px;
height: 375px;
float: left;
margin-top: -8%;
margin-left: 174px;
text-align: center;
font-size: 20px;
font-weight: bold;
overflow: hidden;
}
.imgbox2{
330px;
height: 375px;
float: left;
margin-top: -8%;
text-align: center;
font-size: 20px;
font-weight: bold;
overflow: hidden;
}
.imgbox3{
330px;
height: 375px;
float: left;
margin-top: -8%;
text-align: center;
font-size: 20px;
font-weight: bold;
overflow: hidden;
}