title: Trying to fadeIn .css ('background-image", __)
body: <p>I'm trying to get a background image to swap between other images when divs are hovered over. What do I need to change to make the images fade between one another? Code looks like this:</p>
  
  <pre><code>  $('#mainUK').mouseenter(function(){
        $('.splash').css("background-image","url(Assets/Images/Splash/UK.jpg)");
    });
  
    $('#mainJapan').mouseenter(function(){
        $('.splash').css("background-image","url(Assets/Images/Splash/Japan.jpg)");
    });
  etc..
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> .splash { 
        background-image: url(Assets/Images/Splash/UK.jpg);
        background-repeat:no-repeat;
        background-position:center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        width:100%;
        height:100%;
        position:fixed;
      }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="splash_bg"&gt;
      &lt;div class="splash"&gt;
        &lt;div class="back_arrow"&gt;&lt;h3&gt;&amp;larr;&lt;/h3&gt;&lt;/div&gt;
        &lt;div class="main_nav"&gt;
            &lt;ul&gt;
              &lt;li class="main_headings"&gt;&lt;div id="mainUK"&gt;&lt;h3&gt;The UK&lt;/h3&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;li class="main_headings_sub"&gt;&lt;a href="/England"&gt;&lt;div id="mainEngland"&gt;&lt;h3&gt;England&lt;/h3&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main_headings_sub"&gt;&lt;a href="/Scotland"&gt;&lt;div id="mainScotland"&gt;&lt;h3&gt;Scotland&lt;/h3&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main_headings_sub"&gt;&lt;a href="/Wales"&gt;&lt;div id="mainWales"&gt;&lt;h3&gt;Wales&lt;/h3&gt;&lt;div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main_headings"&gt;&lt;a href="/Japan"&gt;&lt;div id="mainJapan"&gt;&lt;h3&gt;Japan&lt;/h3&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main_headings"&gt;&lt;a href="/China"&gt;&lt;div id="mainChina"&gt;&lt;h3&gt;China&lt;/h3&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main_headings"&gt;&lt;a href="/HK"&gt;&lt;div id="mainHK"&gt;&lt;h3&gt;Hong Kong&lt;/h3&gt;&lt;div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main_headings"&gt;&lt;a href="/Malaysia"&gt;&lt;div id="mainMalaysia"&gt;&lt;h3&gt;Malaysia&lt;/h3&gt;&lt;div&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>So I've solved it. Thanks to @demux/@luciferous as you pointed me in the right direction. If there's a better way to do this please feel free to let me know. Thank again.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="splash"&gt;
      &lt;div class="splash_UK"&gt;&lt;/div&gt;
      &lt;div class="splash_Japan"&gt;&lt;/div&gt;
      &lt;div class="splash_China"&gt;&lt;/div&gt;
      &lt;div class="splash_HK"&gt;&lt;/div&gt;
      &lt;div class="splash_Malaysia"&gt;&lt;/div&gt;
        &lt;div class="back_arrow"&gt;&lt;h3&gt;&amp;larr;&lt;/h3&gt;&lt;/div&gt;
        &lt;div class="main_nav"&gt;
            &lt;ul&gt;
              &lt;li class="main_headings"&gt;&lt;div id="mainUK"&gt;&lt;h3&gt;The UK&lt;/h3&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;li class="main_headings_sub"&gt;&lt;a href="/England"&gt;&lt;div id="mainEngland"&gt;&lt;h3&gt;England&lt;/h3&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main_headings_sub"&gt;&lt;a href="/Scotland"&gt;&lt;div id="mainScotland"&gt;&lt;h3&gt;Scotland&lt;/h3&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main_headings_sub"&gt;&lt;a href="/Wales"&gt;&lt;div id="mainWales"&gt;&lt;h3&gt;Wales&lt;/h3&gt;&lt;div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main_headings"&gt;&lt;a href="/Japan"&gt;&lt;div id="mainJapan"&gt;&lt;h3&gt;Japan&lt;/h3&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main_headings"&gt;&lt;a href="/China"&gt;&lt;div id="mainChina"&gt;&lt;h3&gt;China&lt;/h3&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main_headings"&gt;&lt;a href="/HK"&gt;&lt;div id="mainHK"&gt;&lt;h3&gt;Hong Kong&lt;/h3&gt;&lt;div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main_headings"&gt;&lt;a href="/Malaysia"&gt;&lt;div id="mainMalaysia"&gt;&lt;h3&gt;Malaysia&lt;/h3&gt;&lt;div&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS: (I've adjusted the z-index either side of the divs to 1 &amp; 3 respectively.)</p>
  
  <pre><code>.splash_UK, .splash_Japan, .splash_China, .splash_HK, .splash_Malaysia{
    background-repeat:no-repeat;
    background-position:center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
    position:fixed;
    opacity:0;
    z-index:2;
    -webkit-transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    -ms-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
  }
  
  .splash_UK { 
    background-image: url(Assets/Images/Splash/UK.jpg);
  }
  
  .splash_Japan { 
    background-image: url(Assets/Images/Splash/Japan.jpg);
  }
  
  .splash_China { 
    background-image: url(Assets/Images/Splash/China.jpg);
  }
  
  .splash_HK { 
    background-image: url(Assets/Images/Splash/HK.jpg);
  }
  
  .splash_Malaysia { 
    background-image: url(Assets/Images/Splash/Malaysia.jpg);
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> $('#mainJapan').mouseenter(function() {
      $('.splash_Japan').css('opacity', '1');
      $('.splash_UK,.splash_China,.splash_HK,.splash_Malaysia').css('opacity','0');
    });
  
    $('#mainUK').mouseenter(function() {
      $('.splash_UK').css('opacity', '1');
      $('.splash_Japan,.splash_China,.splash_HK,.splash_Malaysia').css('opacity','0');
    });
  
    $('#mainChina').mouseenter(function() {
      $('.splash_China').css('opacity', '1');
      $('.splash_Japan,.splash_UK,.splash_HK,.splash_Malaysia').css('opacity','0');
    });
  
    $('#mainHK').mouseenter(function() {
      $('.splash_HK').css('opacity', '1');
      $('.splash_Japan,.splash_China,.splash_UK,.splash_Malaysia').css('opacity','0');
    });
  
    $('#mainMalaysia').mouseenter(function() {
      $('.splash_Malaysia').css('opacity', '1');
      $('.splash_Japan,.splash_China,.splash_HK,.splash_UK').css('opacity','0');
    });
  </code></pre>