Reply To: event mouseover/mouseout img repeater ACF

• alexcrc

• June 22, 2020 at 11:39 pm

Here is the solution to the problem :

in the acf parameters you create two sub fields, one with the first image and the second with the image that will appear during the hover.
You select Image URL for the two images and then you integrate this code:

<?php if( have_rows('projets') ): ?>
                        <?php while( have_rows('projets') ): the_row(); 
                                    $image = get_sub_field('image_projet');
                                    $imageHover = get_sub_field('imghover');
                                ?>
                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 cas justify-content-center">
                            <a href="<?php  the_sub_field('lien_vers_le_projet');   ?>" class="d-block w-100 a">
                                <?php if( get_sub_field('image_projet')  ): ?>
                                <img class="imageProjet" src="<?php echo $image; ?>"
                                   onmouseover="this.src='<?php echo $imageHover; ?>'"
                                   onmouseout="this.src='<?php echo $image; ?>'" />
                                <?php endif; ?>
                            </a>
                            
                        </div>
                        <?php endwhile; ?>
                        <?php endif; ?>