css - animation hover effect on background-image

Question

I'm trying to add an animation effect on an image used as a background in css.

Here's the 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);
}

Now, on hover, I'm trying to scale the background-size a bit (grown effect) but it's not working.

All I have is the background increasing in size but without the animation (or anyway, scale it smoothly)

I've read some articles, but they are all talking about this effect applied not on background-image, but on an image in the HTML.

here's a quick fiddle

any idea on how to properly achieve this type of effect?

Answer 1

you have 2 things wrong in your code,

• 1st

you have an extra double quote " after the background which make the rest of the CSS below invalid, therefore the transition, won't work

• 2nd

you can't have background-size:cover and background-size:100% at the same time, it only parse the last one that was added in CSS.

Note:

Comment Syntax: in CSS this // doesn't work, use /* */

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