1

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>
Improve this question
1

2 Answers 2

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;
}
Improve this answer
2
  • ok, but how I can add this field? is there any core function that needs to be added to the functions.php file?
    – ZWPDev
    Commented Feb 7, 2019 at 16:07
  • Sorry, my bad. If you haven't seen it already, Advanced Custom Fields is pretty much an essential wordpress plugin for most theme/plugin development.
    – Paul Elrich
    Commented Feb 7, 2019 at 19:53
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

Improve this answer
2
  • The css solution is what I'm using now, but it will load the same picture for all team members and this isn't what I expect, every team member has it's own second picture.
    – ZWPDev
    Commented Feb 7, 2019 at 16:09
  • If you're going to use just CSS then you'd need to have unique IDs on each user and then set appropriately for each of them.
    – mrben522
    Commented Feb 7, 2019 at 16:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.