title: Changing transparent background-image on hover in front of background colour
body: <p>I've had a search on here and can't seem to find anyone thread addressing the issue I'm having. If I've missed something though I apologise!</p>
  
  <p>I'm doing work for a client who want a logo to change on hover state, with a background color to be assigned on hover at the same time. The logo is partially transparent, so the background color is intended to show through the logo.</p>
  
  <p>I've got something working but I'm getting an annoying result whereby on the first mouseover, the background color appears to cover the whole image as a colored square. Subsequent hovers work as intended.</p>
  
  <p>This made me wonder if the issue was a delay in the server providing the images. I tried preloading them but no luck.</p>
  
  <p>I've got a prototype in Codepen, source code below! <a href="http://codepen.io/JD1990/pen/mPagaz" rel="nofollow">http://codepen.io/JD1990/pen/mPagaz</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="test"&gt;
      &lt;img src="http://dummyimage.com/318x318/ffffff/ffffff.png"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#preload-01 { 
      background: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc-inverse.png) no-repeat -9999px -9999px;
  }
  
  .test {
      display: inline-block;
      position: relative;
  }
  .test:after {
      content: '';
      position: absolute;
      top: 0; 
      right: 0;
      bottom: 0; 
      left: 0;
      background-color: rgba(0,0,0,0);
      background-image: url(http://new-site-jd-5-5-16.new-site-    fa.appspot.com/static/content/client-logo-bbc-inverse.png);
      background-image: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc.png);
   }
  
   .test:hover:after {
       background-image: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc-inverse.png);
       background-color: black;
   }
  </code></pre>
  
  <p>Very grateful for any hints, I'm still quite inexperienced with CSS so thank you in advance :)</p>