Ausblenden von Farbe, zoomen Hintergrundbild auf Schwebeflug

Question

Ich versuche zu kombinieren verblassen eine Farbe (dieser Teil funktioniert gut), aber auch ein Hintergrundbild auf Schwebeflug gleichmäßig heranzuzoomen.

Wordpress inline das Hintergrundbild ausgibt:

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

Und hier ist mein 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); 
} 

Im Moment ist die Farbe fein ausblendet, aber das Hintergrundbild Zoom springt auf die Stelle, anstatt es passiert reibungslos, wie kann ich das ändern?

Answer 1

Das Problem wird durch wahrscheinlich verursacht wird:

background-size:cover; 

Sie sollten Ihre erste background-size ändern:

background-size: 100%;