放大时包含图像

Question

我连续三张图片。他们在鼠标悬停时放大。问题是，当它们放大时，它们会交叉到周围的元素中。我的 jsfiddle 来了。红色边框代表整个容器，黑色边框代表单个图像容器。所以我想做的是在鼠标悬停时放大每个图像，但放大不应超出黑色边框。我已经为此搜索了解决方案，我发现据说使用 overflow:hidden 的解决方案，但这似乎没有什么不同。谁能指出错误？

    .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>

Answer 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;
}

这样你的容器保持相同大小，隐藏溢出，但你的图像在悬停时缩放。

这是更新后的 fiddle

放大时包含图像

Containg image when enlarging

css

animate.css

image-enlarge