title: Preloading Images working on Chrome, not Firefox or Safari
body: <p>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.</p>
  
  <p>Thoughts?</p>
  
  <p>Code:</p>
  
  <pre><code>    &lt;div class="services-row"&gt;
      &lt;div class="grid-x"&gt;
          &lt;?php if ( have_rows( 'services' ) ) : ?&gt;
              &lt;?php $counter; ?&gt;
              &lt;?php while ( have_rows( 'services' ) ) : the_row(); ?&gt;
                  &lt;?php $service_image = get_sub_field( 'service_image' ); ?&gt;
                  &lt;?php $service_hover_image = get_sub_field( 'service_hover_image' ); ?&gt;
  
                  &lt;?php $counter ++; ?&gt;
  
                  &lt;style type="text/css"&gt;
                      .blockNumber-&lt;?php echo $counter; ?&gt; {
                          background-image: url('&lt;?php echo $service_image['url']; ?&gt;');
                          transition: .5s;
                      }
                      .blockNumber-&lt;?php echo $counter; ?&gt;::before {
                          content: url('&lt;?php echo $service_hover_image['url']; ?&gt;');
                          display: none;
                      }
                      .blockNumber-&lt;?php echo $counter; ?&gt;:hover {
                          background-image: url('&lt;?php echo $service_hover_image['url']; ?&gt;');
                          transition: .5s;
                      }
  
                  &lt;/style&gt;
  
                  &lt;?php $service_image = get_sub_field( 'service_image' ); ?&gt;
                  &lt;div class="inner-service small-12 medium-6 large-3 cell blockNumber-&lt;?php echo $counter; ?&gt;"&gt;
                      &lt;span class="service-title"&gt;&lt;a href="&lt;?php the_sub_field('service_link'); ?&gt;"&gt;&lt;?php the_sub_field( 'service_title' ); ?&gt;&lt;/a&gt;&lt;/span&gt;
                  &lt;/div&gt;
  
  
  
              &lt;?php endwhile; ?&gt;
          &lt;?php else : ?&gt;
              &lt;?php // no rows found ?&gt;
          &lt;?php endif; ?&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>