Question

我正在使用转换和转换的组合来使背景图像在我的html中悬停。

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

下面的codepen没有显示它，但是在我的实际html中关闭了这个差距，不知道为什么它不在这里（可能与我正在使用的materialize css库有关）。 / p>

<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

你在寻找像这样的东西

＆＃13;

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;
}

＆＃13;

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

＆＃13;

css转换和转换溢出到导航栏

1 个答案: