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 处错误，

• 1st

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>