Css 放大时包含图像

我一行有三张图片。它们在鼠标上方放大。问题是，当它们扩大时，它们会与周围的元素交叉。我的朋友来了。红色边框表示整个容器，黑色边框表示单个图像容器。所以我要做的是放大鼠标上方的每个图像，但放大的图像不应该超出黑色边框。我已经找到了解决这个问题的方法，我发现的方法说是使用溢出：隐藏，但这似乎没有什么区别。有人能指出错误吗

    .container {height:40px;border:1px solid red}
    .nav {margin:0; padding-top:5px;overflow:hidden}
    .nav-items {border:1px solid black}
    #set2 {margin-left:0px; display:inline-block}
    #set2:hover {  
      -webkit-animation: enlarge 5s;
      animation: enlarge 2s 1 forwards;
    }
    @-webkit-keyframes enlarge {
      100% {
        -webkit-transform: scale(1.5);
        transform: scale(2.1);
      }
    }


    <div class="banner_set"> 
     <div class="container"> 
      <ul class="nav">
        <li id="set2" class="nav-items"><a href="example.com"><img src="example1.jpg"></a></li>
        <li id="set2" class="nav-items"><a href="example.com"><img src="example2.jpg"></a></li>
        <li id="set2" class="nav-items"><a href="example.com"><img src="example3.jpg"></a></li>
       </ul>
       </div>
    </div>

.container{高度：40px；边框：1px实心红色}
.nav{margin:0；padding top:5px；溢出：隐藏}
.nav项目{边框：1px纯黑}
#set2{左边距：0px；显示：内联块}
#set2:悬停{
-webkit动画：放大5s；
动画：向前放大2S1；
}
@-webkit关键帧放大{
100% {
-webkit转换：比例（1.5）；
转换：比例（2.1）；
}
}

首先，您使用的是重复的ID（您不应该这样做）

其次，您正在缩放容器，而不是图像。 更新样式，以便：

.nav-items {margin-left:0px; display:inline-block; overflow: hidden;}
.nav-items:hover img {  
  -webkit-animation: enlarge 5s;
  animation: enlarge 2s 1 forwards;
}

这样，您的容器保持相同大小，隐藏溢出，但您的图像在悬停状态下缩放

---

这里有一个更新的

你能用工作图像更新你的小提琴吗？您的本地路径不工作。