title: Fade out colour, zoom background image on hover
body: <p>I'm trying to combine fading out a colour (that part works fine) but also zoom in a background image smoothly on hover.</p>
  
  <p>Wordpress is outputting the background image inline:</p>
  
  <pre><code>&lt;a href="&lt;?php echo the_permalink(); ?&gt;" class="product-module" style="background-image:url(&lt;?php echo the_field('thumbnail_image'); ?&gt;);"  data-equalizer-watch&gt;
      &lt;span class="product-overlay"&gt;
          &lt;h2&gt;
              &lt;?php echo get_the_title($post-&gt;post_parent); ?&gt;&lt;br /&gt;
              &lt;?php echo the_title(); ?&gt;
          &lt;/h2&gt;                   
      &lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>And here's my css:</p>
  
  <pre><code>.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); 
  }
  </code></pre>
  
  <p>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?</p>