Fix hover images blink

My suggestion is to get around using background-image, and load both images at the same time. This should prevent the flash of the hover image loading on the first hover. If the images are loaded as images instead of background images, then you can use CSS to set the opacity of the hover image to 0 and then just make opacity 1 on hover. By using position absolute for the images, they should lay on top of each other.

<div class="box">
    <?php $id = get_the_ID(); ?>
    <div class="rounded-circle staff-pic" id="staff-pic-<?php echo $id; ?>">
        <img src="https://wordpress.stackexchange.com/questions/330719/<?php the_post_thumbnail_url("full'); ?>" alt="<?php echo $id;?>" class="initial-image">
        <?php if(class_exists('MultiPostThumbnails')):
            $hover_pic = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'secondary-image');?>
            <img src="<?php echo $hover_pic;?>" class="hover-pic">
        <?php endif; ?>
    </div>
    <h3 class="text-center team-name">
        <?php the_title(); ?>
    </h3>
    <p class="description text-center">
        <?php the_content(); ?>
    </p>
</div>

With the following CSS:

.rounded-circle.staff-pic {
    position: relative;
}
.initial-image {
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
}
.hover-pic {
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    z-index: 2
}
.rounded-circle.staff-pic::hover .hover-pic {
    opacity: 1;
    transition: all 300ms;
}

You may need to make some minor tweaks to the css, but without actually seeing your layout, this should be a good start.