Background-size: cover on hover zoom transition

Question

I want to make zoom effect when user hover link (div) with image background.

I don't know how to do it when i want to zoom only background not text! And i cant find the best way.

Here is a code (doesn't work as i want):

Answer 1

You can't smoothly animate the background-size property if it's set to cover. But you can fake it by animating transform instead. And since you only want the image scaled, not the contents, you'll need a child element dedicated to displaying the image (done with a pseudo-element in the example below).

.wrap {
  width: 33%;
  padding-bottom: 20%;
  overflow: hidden;
  position: relative;
  transition: all .8s;
  background: url(http://hokejfan.pl/hokej2015/kluby/static/images2/48b51db749e3d9d992a61d289bc3c535.jpg);
  background-position: center center;
  background-size: cover;
}

.wrap::before { 
  content:"";
  position:absolute; top:0;right:0;bottom:0;left:0;
  background:inherit;
  transition:inherit;
}
.wrap:hover::before { 
  transform: scale(1.2);
}

.content {
  position: relative;
}

<div class="wrap">
  <div class="content">Content</div>
</div>