I've been wracking my brain trying to find a solution to this issue for quite some time now, but so far I haven't had any luck.
My objective is to change the background image of a specific div when it's hovered over to a darker version of the original image. I initially tried using the filter property, but it ended up affecting all the nested divs with content inside (via JavaScript).
This task is being carried out within a repeater field using ACF. The background-image is selected through a sub-field within the repeater.
I've made attempts with JavaScript, but unfortunately, I haven't found a successful solution yet.
I also considered replacing the divs, which is why you see a hover-div implemented. However, that method didn't yield any positive results.
You can review my code below for further reference.
Please feel free to provide any assistance or guidance!
<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>