Html 悬停时缩放圆形图像

我试图有一个带有边框的“圆形”图像，当用户将鼠标悬停在图像上时，图像内部的边框被缩放。为什么会出现故障？有人能告诉我发生了什么事吗

HTML

---

边界半径不是可设置动画的属性，因此它不会随图像缩放。它仅在过渡结束时缩放

您可以将边框半径应用于缩放比例为

的项目：

.portfolio-item-preview {
    overflow: hidden;
    border-radius:50%;
    position: relative;
    -webkit-transition: all 0.125s ease-in-out 0s;
    -moz-transition: all 0.125s ease-in-out 0s;
    -ms-transition: all 0.125s ease-in-out 0s;
    -o-transition: all 0.125s ease-in-out 0s;
    transition: all 0.125s ease-in-out 0s;
}

选中此项
如果要在缩放时保持边框，则可以在图像上放置一个带有边框和方框阴影（方框阴影将充当实际灰色边框）的透明圆。这样你基本上有一个显示图像的小窗口

#container{
    position:relative;
    display:inline-block;    

}

#circle{
    z-index:2;
    position:absolute;
    top:0;
    left:0;    
    border-radius:50%;
    height:200px;
    width:200px;
    border:20px solid white;
    box-shadow:0 0 2px #666;
}
img {
    border-radius:50%;
    width:200px;
    z-index:1;
    position:absolute;
    top:20px;
    left:20px;  
}
#container:hover img{
    -webkit-transform: scale(1.1);
    -webkit-transition: all 0.125s ease-in-out 0s;
    -moz-transition: all 0.125s ease-in-out 0s;
    -ms-transition: all 0.125s ease-in-out 0s;
    -o-transition: all 0.125s ease-in-out 0s;
    transition: all 0.125s ease-in-out 0s;
}

这是我的小提琴：
这是一把基于用户3765149答案的小提琴

我添加了一个边界元素，它可以独立于图像缩放进行尺寸标注，而圆形元素仅用作遮罩。它只需要一点数学来正确调整它

<div id="container">
    <div id="border"> </div>
    <div id="circle"> </div>
    <img src="https://i.imgur.com/aLJnBtV.jpg" alt=""/>
</div>            

添加css“公文包项目”：

我做了一些改变：

我如何才能达到这个效果？考虑更多的细节来说明为什么问题的发生以及为什么会解决这个问题。这种回答对未来的用户没有多大帮助，但更深入的回答在未来几年可能会有所帮助。
#container{
    position:relative;
    display:inline-block;    

}

#circle{
    z-index:2;
    position:absolute;
    top:0;
    left:0;    
    border-radius:50%;
    height:200px;
    width:200px;
    border:20px solid white;
    box-shadow:0 0 2px #666;
}
img {
    border-radius:50%;
    width:200px;
    z-index:1;
    position:absolute;
    top:20px;
    left:20px;  
}
#container:hover img{
    -webkit-transform: scale(1.1);
    -webkit-transition: all 0.125s ease-in-out 0s;
    -moz-transition: all 0.125s ease-in-out 0s;
    -ms-transition: all 0.125s ease-in-out 0s;
    -o-transition: all 0.125s ease-in-out 0s;
    transition: all 0.125s ease-in-out 0s;
}

<div id="container">
    <div id="border"> </div>
    <div id="circle"> </div>
    <img src="https://i.imgur.com/aLJnBtV.jpg" alt=""/>
</div>            

#container{
    position:relative;
    display:inline-block;    
}
#border{
    z-index:3;  
    position:absolute;
    top:6px;
    left:6px;
    border-radius:50%;
    height:206px;
    width:206px;
    border:1px solid #dedede;    
}
#circle{
    z-index:2;
    position:absolute;
    top:0;
    left:0;    
    border-radius:50%;
    height:200px;
    width:200px;
    border:10px solid white;
}
img {
    z-index:1;
    border-radius:50%;
    width:200px;
    position:absolute;
    top:10px;
    left:10px; 
    transform: scale(1);
    transition: all 0.15s ease-out 0s;
}
#container:hover img{
    transform: scale(1.08);
    transition: all 0.15s ease-out 0s;
}

translateZ(0);