css做鼠标指向图片图片放大但边框不放大

这是一个圆形边框做的效果

HTML

<div class="circle-wrapper">
  <img src="" >
</div>

CSS

.circle-wrapper,
.circle-wrapper img {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -webkit-transition: .3s;
  transition: .3s;
}

.circle-wrapper {
  border: 1px solid #ddd;
  position: relative;
  overflow: hidden;
}

.circle-wrapper img {
  position: absolute;
}

.circle-wrapper img:hover {
  -webkit-transform: scale(2);
  transform: scale(2);
}

自己做的案例：

HTML

<div style="position:absolute; top: 0px; left: 0px; width: 100%; min-width: 1200px;">
    <!--案例 开始-->
        <div id="cases">
            <div id="al-list">
                <div class="al-items">
                <span>WORKS/案例</span>
                </div>
                <div class="al-right">
                          
                            <a class="a-item" href="#" rel="all">所有</a>
                        
                            <a class="a-item" href="#" rel="vi">VI</a>
                        
                            <a class="a-item" href="#" rel="baozhuang">包装</a>
                        
                            <a class="a-item" href="#" rel="huace">画册</a>
                           
                            <a class="a-item" href="#" rel="gongcheng">工程</a>
                       
                            <a class="a-item" href="#" rel="guanggao">广告</a>
                       
                </div>
            </div>
            
            <div class="al">
                <div class="anli">
                    <div class="four-anli">
                    
                       <a href="#"><img src="dt_img/a1.jpg" /></a>
                    </div>
                    <div class="four-anli">
                        <a href="#"><img src="dt_img/a2.jpg"  /></a>
                    </div>
                    <div class="four-anli" >
                        <a href="#"><img src="dt_img/a3.jpg"  /></a>
                    </div>
                    <div class="four-anli" >
                        <a href="#"><img src="dt_img/a4.jpg" /></a>
                    </div>
                </div>
                <div class="anli">
                    <div class="four-anli" >
                       <a href="#"> <img src="dt_img/a5.jpg"  /></a>
                    </div>
                    <div class="four-anli" >
                       <a href="#"><img src="dt_img/a6.jpg"/></a>
                    </div>
                    <div class="four-anli" >
                       <a href="#"> <img src="dt_img/a7.jpg"/></a>
                    </div>
                    <div class="four-anli" >
                        <a href="#"><img src="dt_img/a8.jpg" /></a>
                    </div>
                </div>
                <div class="anli">
                    <div class="four-anli" >
                        <a href="#"><img src="dt_img/a9.jpg" /></a>
                    </div>
                    <div class="four-anli" >
                        <a href="#"><img src="dt_img/a10.jpg" /></a>
                    </div>
                    <div class="four-anli" >
                        <a href="#"><img src="dt_img/a11.jpg"  /></a>
                    </div>
                    <div class="four-anli" >
                        <a href="#"><img src="dt_img/a12.jpg"/></a>
                    </div>
                </div>
           </div>
        </div>
</div>

CSS

/*案例 开始*/
#cases{
    clear:both;
    position:relative;
    width:100%;
    height:800px;
    padding:40px 0px;
    
    }
#al-list{
    width:80%;
    margin-left:10%;
    position:relative;
    
    height:30px;}
.al-items{
    float:left;
    position:relative;
    width:75%;
    height:30px;
    
    }    
.al-right{
    float:left;
    position:relative;
    margin-right:0px;
    width:25%;
    height:30px;
    
    }
.a-item{
    margin-left:10px;
    margin-right:10px;
    
    }
    
    
    
    
    
.al{
    position:relative;
    padding:30px 0}
.anli{
    width:80%;
    position:relative;
    margin-left:10%;
    margin-top:20px;
    height:200px;
}

.four-anli,.four-anli img{
    display:inline-block;
    
    height:200px;
    -webkit-transition: .3s;
      transition: .3s;
    }
.four-anli{
    width:23%;
    position:relative;
    float:left;
    margin-left:2%;
    border:1px solid #000;
    right:1%;
    overflow:hidden;
    }
.four-anli img{
    width:100%;
    position:absolute;
   }
.four-anli img:hover{
    -webkit-transform: scale(2);
      transform: scale(2);
  }
   

/*案例 结束*/

效果：

　　初始效果

　　鼠标移动上的效果

发现第二张图片有变化了吗