css鼠标指上放大的效果，可是图片放大后，中间空白处就不是圆形了？

Question

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

                </div>

.circle_inner{
    
    top:200px;
    left:200px;
    position: relative;
    height: 400px;
    width: 400px;
}
.circle_inner_1{
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
}
.circle_inner img{
    width: 200px;
    height:200px;
    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;
}
.circle_inner 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;
    
}

Answer 1

这个不是圆形正常啊，transform-origin可以改变缩放基点，你试试现在你缩放是基于这个扇形的中心点
或者你把中间白色圆块地位在整个模块上面，始终在最上面z-index：99，这样就中间始终都是圆的（视觉上是这样）

Answer 2

你图片放大了还能凑成圆吗？这不废话吗，当然不能，解决办法，在这里写个圆用绝对定位定过去，z-index最高把其他的覆盖就行了
，

Answer 3

大很多并不好看，稍微大一点，颜色稍微变一点，就可以了