鼠标放上去图片放大css

<style type="text/css">
    #div1{
          width: 200px;
          height: 138px;
          border: #000 solid 0px;
          margin: 50px auto;
          /* overflow: hidden; */
    }
    #div1 img{
          cursor: pointer;
          transition: all 0.6s;
    }
    #div1 img:hover{
          transform: scale(1.4);
    }
</style>


<div id="div1"><img src="${bean.content!}" style="width:300px;height:300px"></img></div>


2、设置DIV的 overflow: hidden; 属性，作用是图片变大后超过DIV区域的部分会自动隐藏。

3、设置 transition: all 0.6s; 属性和 transform: scale(1.4); 属性，其中 transition: all 0.6s; 是变化速度，数值越小速度越快，而 transform: scale(1.4); 是变化范围，  scale(1.4) 是放大1.4倍的意思。