淡出颜色，悬停

Question

我想结合淡出彩色变焦背景图片（这部分工作正常），而且放大的背景图像上平稳悬停。

WordPress是输出的背景图像在线：

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

这是我的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); 
} 

在颜色变淡了罚款的时刻，但背景图像缩放跳进地方，而不是它发生顺利，我该如何改变这种情况？

Answer 1

问题很可能是由引起：

background-size:cover; 

你应该改变您最初的background-size到：

background-size: 100%;