修复鼠标悬停时闪烁的wordpress特色图片

Question

我有这个使用php生成的css脚本，它用于在用户悬停时显示wordpress的第二张特色图片。问题是图像闪烁，我不知道如何解决这个小问题。有人可以为此提出建议吗？我已经实现了lazyload，但是在这种情况下它没有用。

<div class="box">
      <?php $id = get_the_ID(); ?>
      <div class="rounded-circle" style="background-image:url('<?php the_post_thumbnail_url('full'); ?>')" id="staff-pic-<?php echo $id; ?>"></div>
      <?php if(class_exists('MultiPostThumbnails')):
            $hover_pic = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'secondary-image');
            endif;
            echo
            '<style>
                #staff-pic-'.$id.'{
                background-size: cover;
                background-position: center;
                margin: auto;
                transition: all 300ms;
              }
              #staff-pic-'.$id.':hover{
                transition: all 300ms;
                background-image:url("'.$hover_pic.'") !important;
                background-size: cover;
                background-position: center;
                margin: auto;
              }
            </style>';
      ?>
        <h3 class="text-center team-name"><?php the_title(); ?></h3>
        <p class="description text-center"><?php the_content(); ?></p>
    </div>