仅在 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

只需将您的“.photo-grid-container”div 包装为具有“overflow: hidden”属性的 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>