css过渡和转换溢出到导航栏答案

【问题标题】：css transition and transform overflowing into navbarcss过渡和转换溢出到导航栏
【发布时间】：2017-04-19 10:04:15
【问题描述】：

我正在使用过渡和变换的组合来使背景图像在我的 html 中悬停时增长。

问题是悬停时图像会缩放到导航栏中。

下面的 codepen 没有显示它，但这个差距在我的实际 html 中已经关闭，不知道为什么它不在这里（可能与我正在使用的 materialize 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;
}

我遇到了问题，希望在缩放图像方面得到一些帮助，但仅限于其容器内。

【问题讨论】：

标签： css

【解决方案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>

【讨论】：