Change post featured image on hover

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"><a href="#"><i class="fab fa-facebook"></i></a><a href="#"><i class="fab fa-twitter"></i></a><a href="#"><i class="fab fa-instagram"></i></a></div>
                </div>
            </div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
        </div>
</div>

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"><a href="#"><i class="fab fa-facebook"></i></a><a href="#"><i class="fab fa-twitter"></i></a><a href="#"><i class="fab fa-instagram"></i></a></div>
                </div>
            </div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
        </div>
</div>

• custom-post-types
• images
• css
• post-thumbnails

Share Improve this question asked Feb 6, 2019 at 11:41 ZWPDevZWPDev 11622 silver badges1616 bronze badges 1

• Possible duplicate of Add a Meta Box for uploading a SECOND Featured Image? – rudtek Commented Feb 7, 2019 at 18:15

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

You can add a custom field to you team page, call it "second_picture", or whatever you want, and add the code

           <div class="box">
                    <div class="rounded-circle" style="background-image:url('<?php the_post_thumbnail_url('full'); ?>')" id="staff-pic">
                        <div class="second-picture" style="background-image:url(<?php the_field('second_picture'); ?>)"></div>
                    </div>
                    <h3 class="team-name"><?php the_title(); ?></h3>
                    <p class="description text-center"><?php echo get_the_content(); ?></p>
                    <div class="social"><a href="#"><i class="fab fa-facebook"></i></a><a href="#"><i class="fab fa-twitter"></i></a><a href="#"><i class="fab fa-instagram"></i></a></div>
                </div>

Then set the hover state

.second-picture{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:.2s;
}
.second-picture:hover{
  opacity:1;
}

This seems like a CSS problem and not a Wordpress problem. you just need hover styles that replace the background image. something like this:

.team-boxed .people .rounded-circle::hover {
    background-image:url("whatever");
}

If you need to get the new image URL from Wordpress then you could either inline that CSS and just dump in a PHP variable (background-image:url("' . $newImageUrl . '");), or use javascript and pass it in as a variable via wp_localize_script