拡大時のコントラスト画像

Question

3つの画像が連続しています。彼らはマウスオーバーで拡大します。問題は、それらが拡大するときに周囲の要素にクロスオーバすることです。私のjsfiddleはここにあります。赤い枠線はコンテナ全体を表し、黒い枠線は個々の画像コンテナを表します。だから、私がやろうとしているのは、マウスオーバーで各画像を拡大することですが、拡大は黒い枠線の外に出てはいけません。私はこれのための解決策を探し、見つかったものはオーバーフローを使用すると言いました。隠されていましたが、それは違いがないようです。誰かが間違いを指摘してくれますか？

.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を使用しています（これを行うべきではありません）。

第2に、イメージではなくコンテナのサイズを変更しています。あなたのコンテナが隠しオーバーフローで、同じサイズのままですが、あなたのイメージがホバーにスケールこう

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

：ように、あなたのスタイルを更新し 。

ここに更新されましたfiddle