css - animation hover effect on background-image

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: https://jsfiddle.net/edrucqjm/

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

thanks a lot