jquery - 仅过渡背景图像大小，在 css 中？ (未设置背景大小时)

Question

我有一个带有背景大小封面的背景图片，并希望它在我将鼠标悬停在容器上时显示动画。我知道如果将背景大小设置为特定像素数我会怎么做，但我需要它在设置为覆盖时做同样的事情。像 calc(cover*1-3) 这样的东西。我通过调整容器大小并更改 z-index 来让它工作。但是这个解决方案看起来不太好，因为它在过渡中间的某个地方更改了 z-index。

现在的样子:https://gyazo.com/98dc31d372f10c4896ff3c783aa436dd

有什么建议吗？ Jquery 欢迎!提前致谢!

这是我的 HTML:

<section class="photo-grid-static">
    <div class="photo-grid-container" style="background-image: url('Images and videos/odesza1.jpg');"></div>
    <div class="photo-grid-container" style="background-image: url('Images and videos/odesza3.jpg');"></div>
    <div class="photo-grid-container" style="background-image: url('Images and videos/odesza2.png');"></div>
</section>

这是我的 CSS:

.photo-grid-static {
    height: 300px;
    width: 100%;
    display: block;
    position: relative;
    background: black;
    padding: none;
    overflow: hidden;
}

.photo-grid-container { 
    z-index: 2;
    float: left;
    width: calc(100% / 3);
    height: 100%;
    line-height: 100%;
    margin: 0;
    margin-right: 0;
    padding: 0;
    display: inline-block;
    position: relative;
    left: 0;
    right: 0;
    background: red;
    background-position: center center;
    background-size: cover;
    transition: all 0.2s;
}

.photo-grid-container:hover{
    z-index: 1;
    transform: scale(1.1,1.1);
}

Answer 1

只需用具有“溢出:隐藏”属性的 div 包装您的“.photo-grid-container”div。

.photo-grid-static {
    height: 300px;
    width: 100%;
    display: block;
    position: relative;
    background: black;
    padding: none;
    overflow: hidden;
}

.photo-grid-static > div {
  float: left;
  width: 33.33%;
  height: 100%;
  overflow: hidden;
}

.photo-grid-container { 
    width: 100%;
    height: 100%;
    line-height: 100%;
    margin: 0;
    margin-right: 0;
    padding: 0;
    display: inline-block;
    position: relative;
    left: 0;
    right: 0;
    background: red;
    background-position: center center;
    background-size: cover;
    transition: all 0.2s;
}

.photo-grid-container:hover{
    transform: scale(1.1,1.1);
}

<section class="photo-grid-static">
  <div>
    <div class="photo-grid-container" style="background-image: url('http://odesza.com/wp-content/uploads/2015/04/1920-1080.jpg');"></div>
  </div>
  <div>
    <div class="photo-grid-container" style="background-image: url('http://odesza.com/wp-content/uploads/2015/04/1920-1080.jpg');"></div>
  </div>
  <div>
    <div class="photo-grid-container" style="background-image: url('http://odesza.com/wp-content/uploads/2015/04/1920-1080.jpg');"></div>
  </div>
</section>