javascript与css如何做当鼠标指到对应的图片之后，该图片变大？

Question

<div class="circle_inner">
                    <div>
                        <img alt="" src="/ehouse/img/item/tourism/circle1.png" > <img
                            alt="" src="/ehouse/img/item/tourism/circle2.png">
                    </div>
                    <div>
                        <img alt="" src="/ehouse/img/item/tourism/circle3.png"> <img
                            alt="" src="/ehouse/img/item/tourism/circle4.png">
                    </div>

                </div>

.circle_inner img:hover{
    width:250px;
    height:250px;
    cursor: pointer;
    
}

如何设置图片中心位置不变呀？
关键是定位，加了效果之后，就挤压变形了？

Answer 1

图片使用 absolute 定位 同时增加爱 z-index

在线预览 http://runjs.cn/code/96qtz0ul

       div.row {
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
        }

        img {
            width: 100px;
            height: 100px;
            transition: width .5s, height .5s;
            -webkit-transition: width .5s, height .5s, transform .5s;
            -moz-transition: width .5s, height .5s, transform .5s;
            -o-transition: width .5s, height .5s, transform .5s;
            position: absolute;
            top: 0;
            left: 0;
        }

        img:hover {
            transform: scale(1.2, 1.2);
            -ms-transform: scale(1.2, 1.2);
            /* IE 9 */
            -webkit-transform: scale(1.2, 1.2);
            /* Safari and Chrome */
            z-index: 9999;
        }

    <div>
        <div class="row">
            <img src="./1.jpg" alt="">
        </div>
        <div class="row">
            <img src="./2.jpg" alt="">
        </div>
    </div>
    <div>
        <div class="row">
            <img src="./3.jpg" alt="">
        </div>
        <div class="row">
            <img src="./4.jpg" alt="">
        </div>
    </div>

Answer 2

用css3的animate结合hover就可以了不需要用js。可以用3d效果。鼠标经过的时候景深距离你近一点就可以了。景深可以做到由远到近的视觉效果

Answer 3

hover的时候重新设置图片的宽高

Answer 4

给个思路，控制 hover：

img {
  width: 400px;
  transition: 1s ease-in-out;
}
img:hover {
  position: fixed;
  z-index: 1;
  width: 800px;
}

不想抖动的话就让图片脱离文档流，根据情况把 position 设置成 absolute 或者 relative

Answer 5

直接css就可以实现了,img先设置一个宽度，配合transition

    #pic img{
        width: 400px;
    }
    #img:hover{
        -webkit-transition: width .25s ease;
           -moz-transition: width .25s ease;
            -ms-transition: width .25s ease;
             -o-transition: width .25s ease;
                transition: width .25s ease;
        width: 800px;
    }

改这样好了

#img{
            width: 200px;
            
            -webkit-transition: transform .25s linear;
               -moz-transition: transform .25s linear;
                -ms-transition: transform .25s linear;
                 -o-transition: transform .25s linear;
                    transition: transform .25s linear;
                    transform-origin: right bottom;
        }
        #img:hover{

            -webkit-transform: scale(2);
               -moz-transform: scale(2);
                -ms-transform: scale(2);
                 -o-transform: scale(2);
                    transform: scale(2);
            /* width: 400px; */
            
        }

Answer 6

transition(过渡) + transform(转化) + hover实现

.ListItem__rightIcon{
    transition: transform 0.5s;
 
}

.ListItem__rightIcon:hover{
    transform: scale(1.5,1.5);
}

Answer 7

可以这样
img：hover{

transform:scale(1.3);
transition:0.5s ease-in-out;

}