2018.08.07css实现图片放大

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;
}

原文地址:https://www.cnblogs.com/sccwxl/p/9437532.html