how to show blog featured image on hover css? - php

Question

I've almost finished my first custom theme for a website. I've created some custom post type to manage a portfolio and a staff member section. No problem with the code, but the client asked if is it possible to change the staff images when an user hover on it. Is there any way to achieve this in wordpress?
Here is a sample of my code
<div class="team-boxed">
<?php
$args = array(
'post_type' => 'team'
);
$team = new WP_Query($args);
?>
<div class="intro">
<h2 class="text-center text-uppercase" id="">Team</h2>
</div>
<div class="row people">
<?php if( $team->have_posts() ): while( $team->have_posts() ): $team->the_post(); ?>
<div class="col-md-6 col-lg-4 item">
<div class="box">
<div class="rounded-circle" style="background-image:url('<?php the_post_thumbnail_url('full'); ?>')" id="staff-pic"></div>
<h3 class="team-name"><?php the_title(); ?></h3>
<p class="description text-center"><?php echo get_the_content(); ?></p>
<div class="social"><i class="fab fa-facebook"></i><i class="fab fa-twitter"></i><i class="fab fa-instagram"></i></div>
</div>
</div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
</div>
</div>

Answer 1

Simplest way would be to output that like this. If you have ALT image stored in custom meta for example you can use that as SECOND IMAGE.
<img src="FIRST IMAGE" onmouseover="this.src='SECOND IMAGE'" onmouseout="this.src='FIRST IMAGE'" />
Other options include outputting some additional CSS or JS. But you can also use general JS with data attributes maybe to handle that with more options, animations etc.