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>