Исправлено мигание WordPress избранного изображения при наведении

Question

У меня есть этот скрипт css, сгенерированный с использованием php, он используется для показа второго изображения 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>