title: Smooth background images transition - Javascript
body: <p><a href="http://www.chooseyourtelescope.com/" rel="nofollow">http://www.chooseyourtelescope.com/</a> (>> Please watch it on a minimum 15'' screen, the site is not entirely responsive yet and you wont see what I'm talking about)</p>
  
  <p>When you hover the buttons (moon, planet, etc...) it changes the background. But the transition is buggy on Chrome (image0>blank>image1). And worknig on IE11 but sometimes with a lag. I didn t try with the other browsers.</p>
  
  <p>How to make a smooth transition?
  A quick fade Image0>image1, not image0>transition color>image1</p>
  
  <p>Here is the code for the MOON button. Thats the same with the others. 
  <em>(I don't know anything about Javascript. I found the script below on Stackoverflow.)</em></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="top-logos-home" id="top-logos-moon-front"&gt;&lt;img src="moon-logo.png" alt="MOON"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.image-home {
       position: absolute;
       width: 100%;
       height: 100%;
       background-image: url(Frontpage.jpg);
       background-size: cover;
       display:inline;
       top:0;
  }
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>jQuery(function(){
      var $body = $('.image-home');
      $('#top-logos-moon-front').hover(function(){
          $body.css('background-image', 'url("Frontpage-moon.jpg")')
      }, function() {
          $body.css('background-image', '')
      })
  })
  </code></pre>