Fix hover images blink

I have this css script generated using php, it’s used to show a wordpress second featured image when an user hover. The problem is that the images are blinking and I don’t know how to solve this small issue. Can anyone suggest a fix for this? I’ve implemented the lazyload, but on this case it’s unuseful.

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