ACF Change Background Image on Hover

Question

Been trying to get a solution for this for a while now and haven't been able to come up with anything that works.

My goal is that when you hover over this particular div, the background image will change to a darkened version of that background image. I've tried using the filter property but it affects all of the inside divs containing content. (Through JavaScript)

This is being done inside a repeater field through ACF. So the background-image is being selected by the sub-field in within the repeater.

I've attempted some Javascript but haven't found a solution.

Also looked at replacing the div's hence you'll see a hover-div. But had no luck.

Below you'll find my code for reference.

Any assistance would be greatly appreciated!

<div class="member-wrap grid-x grid-margin-x grid-margin-y">
            <?php if ( have_rows( 'branch_team_members' ) ) : ?>
                <?php while ( have_rows( 'branch_team_members' ) ) : the_row(); ?>
                    <div class="branch-member-main small-12 medium-6 large-3 cell">
                        <?php $team_member_hover_image = get_sub_field( 'team_member_hover_image' ); ?>
                        <div class="main-member-hover" style="background-image: url('<?php echo $team_member_hover_image['url']; ?>');">    
                        </div>
                        <?php $team_member_image = get_sub_field( 'team_member_image' ); ?>
                        <div class="main-member-area" style="background-image: url('<?php echo $team_member_image['url']; ?>');">
                            <h4 class="member-name-hover"><?php the_sub_field( 'team_member_name' ); ?></h4>
                            <span class="member-position-hover"><?php the_sub_field( 'team_member_position' ); ?></span>        
                            <?php the_sub_field( 'team_member_bio' ); ?>
                        </div>
                        <div class="main-member-contact">
                            <span class="member-name"><?php the_sub_field( 'team_member_name' ); ?></span>
                            <span class="member-contact"><?php the_sub_field( 'team_member_contact' ); ?></span>
                        </div>                      
                    </div>
                <?php endwhile; ?>
            <?php else : ?>
                <?php // no rows found ?>
            <?php endif; ?>
        </div>

Answer 1

Haven't debugged it all - but this might give you an idea, on how to do it.

This method will create a block for each box with a counter

<div class="member-wrap grid-x grid-margin-x grid-margin-y">
        <?php if ( have_rows( 'branch_team_members' ) ) : ?>
            <?php $counter; ?>
            <?php while ( have_rows( 'branch_team_members' ) ) : the_row(); ?>
                <?php $team_member_hover_image = get_sub_field( 'team_member_hover_image' ); ?>
                <?php $counter++; ?>

                <style type="text/css">
                    .blockNumber-<?php echo $counter; ?>{
                        background-image: url('<?php echo $team_member_image['url']; ?>');
                    }
                    .blockNumber-<?php echo $counter; ?>:hover{
                        background-image: url('<?php echo $team_member_hover_image['url']; ?>');
                    }

                </style>

                <div class="branch-member-main small-12 medium-6 large-3 cell">


                    <?php $team_member_image = get_sub_field( 'team_member_image' ); ?>
                    <div class="main-member-area blockNumber-<?php echo $counter; ?>">
                        <h4 class="member-name-hover"><?php the_sub_field( 'team_member_name' ); ?></h4>
                        <span class="member-position-hover"><?php the_sub_field( 'team_member_position' ); ?></span>        
                        <?php the_sub_field( 'team_member_bio' ); ?>
                    </div>
                    <div class="main-member-contact">
                        <span class="member-name"><?php the_sub_field( 'team_member_name' ); ?></span>
                        <span class="member-contact"><?php the_sub_field( 'team_member_contact' ); ?></span>
                    </div>                      
                </div>
            <?php endwhile; ?>
        <?php else : ?>
            <?php // no rows found ?>
        <?php endif; ?>
    </div>