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

我正在尝试结合淡出某种颜色（该部分效果很好），但还要在悬停时平滑放大背景图像。

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);
}

目前，颜色逐渐消失，但背景图像变焦跳到适当位置而不是平稳发生，如何改变呢？

最佳答案

该问题很可能是由以下原因引起的：

background-size:cover;

您应将初始的background-size更改为：

background-size: 100%;

关于css - 淡出颜色，悬停时放大背景图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46471165/