CSSの遷移と変換がナビバーにあふれている

Question

私はhtmlで背景画像をホバリングで成長させるためにトランジションとトランスフォームの組み合わせを使用しています。

問題は、ホバー上で画像がナビゲーションバーに拡大することです。

以下のcodepenには表示されませんが、そのギャップは実際のhtmlでは閉じられていますが、なぜここにないのですか（私が使用しているマテリアライズCSSライブラリと何か関係があります）。

https://jsfiddle.net/tva6zbjh/1/

<nav> 
    <div class="nav-wrapper"> 
    <a href="#" class="brand-logo grow pl-2pct">Free</a> 
    <ul id="nav-mobile" class="right hide-on-med-and-down"> 
     <li><a href="badges.html" class="grow">Badges</a></li> 
     <li><a href="sass.html" class="grow">SAAS</a></li> 
     <li><a href="sass.html" class="grow">HELP</a></li> 
     <li><a href="collapsible.html" class="grow">Other FAQ's</a></li> 
    </ul> 
    </div> 
</nav> 

<div class="grow two-thirds"> 
</div> 

html { 
    top: 0; 
    height: 100%; 
    width: 100%; 
} 

body { 
    top: 0; 
    height: 100%; 
    width: 100%; 
} 

nav { 
    background-color: #26a69a; 
    font-family: 'Roboto Slab', serif; 
    z-index: 500; 
} 


.grow { transition: all .2s ease-in-out; } 
.grow:hover { transform: scale(1.02); } 

.two-thirds { 
    top: 0; 
    height: 100%; 
    width: 100%; 
    z-index: -1; 
    overflow: hidden; 
    background-color: blue; 
} 

イム問題が発生したとしかそのコンテナ内の、画像を拡大縮小するために取得していくつかの助けをしたいと思います。

Answer 1

あなたはこの

nav { 
 
    background-color: #26a69a; 
 
    font-family: 'Roboto Slab', serif; 
 
    z-index: 500; 
 
} 
 
.grow { transition: all .2s ease-in-out; } 
 
.grow:hover { transform: scale(1.5); } 
 

 
.two-thirds { 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: url(http://asgardcursos.com.br/assets/img/blog/c974b82c774d61bc46fcf82913d11994.jpg); 
 
    background-size: cover 
 
} 
 
.container{ 
 
    height: 200px; 
 
    width: 150px; 
 
    z-index: -1; 
 
    overflow: hidden; 
 
}

<nav> 
 

 
</nav> 
 

 
<div class="container"> 
 
    <div class="grow two-thirds"> 
 
    </div> 
 
</div>

のような何かを探しています