css - 淡出颜色，在悬停时缩放背景图像

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