zoukankan      html  css  js  c++  java
  • 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;
    }

  • 相关阅读:
    Vue生命周期
    脚本生命周期
    音频
    光照系统
    InstantOC(对象渲染---游戏优化)
    kafka单机环境配置以及基本操作
    mysql 锁机制
    java.math.BigDecimal类multiply的使用
    去掉返回的json中特殊字符
    TheadLocal与synchronized
  • 原文地址:https://www.cnblogs.com/sccwxl/p/9437532.html
Copyright © 2011-2022 走看看