css转换不起作用的背景缩放

Question

我正在尝试添加一个css过渡，因此当用户悬停在div上时，后台将像这样放大https://codepen.io/mrsalami/pen/eplzme。但是，转换延迟不起作用。

我得HTML：

<div class="what-we-do" id="home-block" style="background: url('http://www.intrawallpaper.com/static/images/1968081.jpg') center center no-repeat;">
  <div class="home-box-text">
    <h1>What We Do</h1>
  </div>
</div>

我的CSS：

#home-block {
  width: 100%;
  transition-delay: 2s;
  -moz-transition-delay: 2s;
  -ms-transition-delay: 2s;
  -webkit-transition-delay: 2s;
  -o-transition-delay: 2s;
  height: calc((100vh - 133px)/ 3);
  -webkit-background-size: 100%;
  background-size: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#home-block:hover {
  background-size: 150% !important;
}
#home-block .home-box-text {
  margin: 0;
}
#home-block .home-box-text h1 {
  font-size: 30px;
  text-transform: uppercase;
}

#scroll-body {
  padding-left: 35px;
}

我的问题的代码是https://codepen.io/mrsalami/pen/wkjrjr

Answer 1

您可以将css中的图像更改为身体的背景图像，如下所示：

#home-block {
    background:url(http://www.intrawallpaper.com/static/images/1968081.jpg) no-repeat;
    width: 100%;
    height: 200px;
    color:#86A3B1;
    background-size: 100%;
    transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -webkit-transition: all 3s ease;
    -o-transition: all 3s ease;
}

#home-block:hover {
    background-size: 150%;  
}