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

你的代码有两处错误，

第一

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

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

css - animation hover effect on background-image

background-image

css-transitions

第一

第二

注：