css - 动画悬停效果对背景图像

Question

我正在尝试在css中用作background的图像上添加动画效果。

这是css：

{
  color: inherit;
  text-decoration: none;
  height: 100%;
  width: 100%;
  display: block;
  background: url('http://placehold.it/350x150')no-repeat top center;"
  background-size: cover !important;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -ms-background-size: 100% 100%;
  transition: all 0.3s ease-in 0s;
  -webkit-transition: all 0.3s ease-in 0s;
  -moz-transition: all 0.3s ease-in 0s;
  -ms-transition: all 0.3s ease-in 0s;
}

a.mf-portfolio-image-container:hover{ 
  background-size: 120% !important;
  //transform: grow(1.072, 1.072);
  //-webkit-transform: scale(1.072, 1.072);
  //-moz-transform: scale(1.072, 1.072);
  //-ms-transform: scale(1.072, 1.072);
}

现在，在悬停时，我正在尝试缩放background-size一点（增长效果），但它无效。

我所拥有的只是背景增加但没有动画（或者无论如何都要平滑地缩放）

我已经阅读了一些文章，但他们都在讨论这种效果不是应用于background-image，而是应用于HTML中的图像。

这是一个快速fiddle

关于如何正确实现这种效果的任何想法？

Answer 1

您的代码中有2个错误，

• 第一

您在"后面有一个额外的双引号background，这使得下面的CSS其余部分无效，因此过渡将无效

• 第二

您不能同时拥有background-size:cover和background-size:100%，它只会解析CSS中添加的最后一个。

注意：

评论语法：在CSS中//不起作用，请使用/* */

.row {
  padding: 50px;
}
.mf-portfolio-page {
  margin-bottom: 30px;
  height: 150px;
  width: 350px;
  position: relative;
  padding: 0;
}
a.mf-portfolio-image-container {
  color: inherit;
  text-decoration: none;
  height: 100%;
  width: 100%;
  display: block;
  background: url('http://placehold.it/350x150')no-repeat top center;
  background-size: 100%;
  transition: all 0.3s ease-in 0s;
}
a.mf-portfolio-image-container:hover {
  background-size: 120%;
  /*transform: grow(1.072, 1.072);
  -webkit-transform: scale(1.072, 1.072);
  -moz-transform: scale(1.072, 1.072);
  -ms-transform: scale(1.072, 1.072); */
}

<div class="row">
  <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4 mf-portfolio-page">
    <a href="#" class="mf-portfolio-image-container">
      <div class="mf-portfolio-image-container-description">
        title
      </div>
    </a>
  </div>
</div>