Containg image when enlarging

Question

I have three images in a row. They enlarge on mouseover. The problem is that when they enlarge they crossover into the surrounding elements. My jsfiddle is here. The red border represents the overall container and the black border represents the individual image containers. So what I am trying to do is enlarge each image on mouseover but the enlargement should not go outside of the black border. I've searched for solutions for this and the ones I found said to use overflow:hidden but that doesn't seem to be making a difference. Would someone please point out the mistake?

    .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

First up, you're using duplicate IDs (which you shouldn't do).

Second, you're scaling the container, not the image. Update your styles so that:

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

This way your container stays the same size, with hidden overflow, but your images scale on hover.

Here's an updated fiddle