Preloading Images working on Chrome, not Firefox or Safari

Question

Currently have this solution for a background image change on :hover, using the ::before element to preload to hover image. It works on Chrome perfectly however does not on firefox or safari, I've done some looking around a tried a few things but it never worked out.

Thoughts?

Code:

    <div class="services-row">
    <div class="grid-x">
        <?php if ( have_rows( 'services' ) ) : ?>
            <?php $counter; ?>
            <?php while ( have_rows( 'services' ) ) : the_row(); ?>
                <?php $service_image = get_sub_field( 'service_image' ); ?>
                <?php $service_hover_image = get_sub_field( 'service_hover_image' ); ?>

                <?php $counter ++; ?>

                <style type="text/css">
                    .blockNumber-<?php echo $counter; ?> {
                        background-image: url('<?php echo $service_image['url']; ?>');
                        transition: .5s;
                    }
                    .blockNumber-<?php echo $counter; ?>::before {
                        content: url('<?php echo $service_hover_image['url']; ?>');
                        display: none;
                    }
                    .blockNumber-<?php echo $counter; ?>:hover {
                        background-image: url('<?php echo $service_hover_image['url']; ?>');
                        transition: .5s;
                    }

                </style>

                <?php $service_image = get_sub_field( 'service_image' ); ?>
                <div class="inner-service small-12 medium-6 large-3 cell blockNumber-<?php echo $counter; ?>">
                    <span class="service-title"><a href="<?php the_sub_field('service_link'); ?>"><?php the_sub_field( 'service_title' ); ?></a></span>
                </div>



            <?php endwhile; ?>
        <?php else : ?>
            <?php // no rows found ?>
        <?php endif; ?>

    </div>
</div>