Contaçage de l'image lors de l'agrandissement

Question

J'ai trois images d'affilée. Ils agrandissent au passage de la souris. Le problème est que lorsqu'ils agrandissent, ils se croisent dans les éléments environnants. Mon jsfiddle est ici. La bordure rouge représente le conteneur global et la bordure noire représente les conteneurs d'image individuels. Donc ce que j'essaye de faire est d'agrandir chaque image au passage de la souris, mais l'agrandissement ne devrait pas sortir de la bordure noire. J'ai cherché des solutions pour cela et celles que j'ai trouvées dites utiliser le débordement: caché mais cela ne semble pas faire de différence. Quelqu'un pourrait-il signaler l'erreur?

.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

Tout d'abord, vous utilisez des ID en double (ce que vous ne devriez pas faire). Deuxièmement, vous mettez à l'échelle le conteneur, pas l'image. Mettez à jour vos styles afin que:

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

De cette façon, votre conteneur reste la même taille, avec trop-plein caché, mais vos images échelle sur vol stationnaire.

est mis à jour Voici un fiddle