只转换背景图片大小，用css？ （未设置背景大小时）

Question

我有一个带背景大小封面的背景图片，并希望当我将鼠标悬停在容器上时进行动画处理。我知道如果将背景大小设置为特定的像素数，我会怎么做，但是当它设置为覆盖时我需要它做同样的事情。有点像计算（封面* 1-3）。我通过调整容器大小并改变z-index来实现它。 Hovewer这个解决方案看起来不太好，因为它在转换过程中的某处改变了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

只需打包你的＆＃34; .photo-grid-container＆＃34;带有＆＃34;溢出的div：隐藏＆＃34;属性。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;