Fade out colour, zoom background image on hover - css

Question

I'm trying to combine fading out a colour (that part works fine) but also zoom in a background image smoothly on hover.
Wordpress is outputting the background image inline:
<a href="<?php echo the_permalink(); ?>" class="product-module" style="background-image:url(<?php echo the_field('thumbnail_image'); ?>);" data-equalizer-watch>
<span class="product-overlay">
<h2>
<?php echo get_the_title($post->post_parent); ?><br />
<?php echo the_title(); ?>
</h2>
</span>
</a>
And here's my css:
.product-module {
background-repeat: no-repeat;
background-size:cover;
background-position: center;
width:100%;
min-height:288px;
display:block;
position: relative;
transition:all 0.5s ease-out;
-webkit-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
}
.product-module:hover {
background-size:120%;
}
.product-module:hover h2 {
color:$orange;
}
.product-module h2 {
color:white;
font-size:2.375rem;
font-weight:$medium;
text-align: center;
height: 100%;
margin-bottom: 0px;
justify-content: center;
display: flex;
align-items: center;
padding:10px;
}
.product-overlay {
height:100%;
width:100%;
background-color:rgba(0,127,161,0.8);
display:block;
-webkit-transition: background .5s ease-out;
-moz-transition: background .5s ease-out;
-o-transition: background .5s ease-out;
transition: background .5s ease-out;
}
.product-overlay:hover {
background-color:rgba(0,127,161,0);
}
At the moment the colour fades out fine but the background image zoom jumps into place rather than it happening smoothly, how can I change that?

Answer 1

The problem is likely being caused by:
background-size:cover;
You should change your initial background-size to:
background-size: 100%;