title: Stop 'Div' from changing position 'hover'
body: <p>I'm trying to build an audio player using HTML, CSS and Jquery. I'm having trouble with the 'hover' method using Jquery. It seems to move the div down when the 'background-image' is removed - why is this? I understand that has to do with the flow of the page. Thinking I should start the audio player again from scratch as there is too much wrong with it. Should I just use CSS hover? </p>
  
  <p>Here is a link to the live <a href="https://benjamingibbsportfolio.000webhostapp.com/index.html#" rel="nofollow noreferrer">site</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.music-box').hover(function() {
    $('.music-box').css("border", "1px solid black");
    $('.music-box').css("background", "none");
    $('.player').css('display', 'block');
    $('.music-details').css('display', 'block');
    $('.buyDiv').css('display', 'block');
  });
  $('.music-box').mouseleave(function() {
    $('.music-box').css("border", "none");
    $('.music-box').css("background", "url('junction.jpg')");
    $('.music-box').css("background-size", "contain");
    $('.music-box').css("background-repeat", "no-repeat");
    $('.player').css('display', 'none');
    $('.music-details').css('display', 'none');
    $('.buyDiv').css('display', 'none');
  });  </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.junction {
    display: inline;
    padding: 2vw; 
  }
  .music-box {
    background: url(junction.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    width: 16vw;
    cursor: pointer;
    height: 30vh;
    display: inline-block;
  }
  .music-details {
    display: none;
    position: relative;
    top: 5vh;
    text-transform: uppercase;
    font-size: 1vh;
    font-family: 'Nunito Sans', sans-serif;
    letter-spacing: 0.5px;
    font-weight: normal;
  }
  .appleLink {
    height: 3vh;
    width: auto;
  }
  .player {
    display: none;
    position: relative;
    top: 7vh;
  }
  .buyDiv {
    display: none;
    height: 3vh;
    top: 9vh;
    width: auto;
    position: relative;
  }
  .buyList {
    position: relative;
    padding: 0;
    margin: 0;
  }
  .buyList li {
    display: inline;
    cursor: pointer;
  }
  .buyFnt {
    text-transform: uppercase;
    font-size: 1vh;
    font-family: 'Nunito Sans', sans-serif;
    letter-spacing: 0.5px;
    font-weight: normal;
    display: inline;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;li class="junction"&gt;
    &lt;div class="music-box"&gt;
      &lt;h3 class="music-details"&gt;Junction - EP
        &lt;br&gt;
        &lt;br&gt;
        Turn Around (feat Madi Lane)
        &lt;br&gt;
        &lt;br&gt;
        My Nu Leng - 2018
      &lt;/h3&gt;
      &lt;audio id="player" src="tune.mp3"&gt;&lt;/audio&gt;
  
      &lt;div class="player"&gt; 
        &lt;button onclick="document.getElementById('player').play()"&gt;&lt;img class="playBtn" src="playBtn.png"&gt;&lt;/button&gt; 
        &lt;button onclick="document.getElementById('player').pause()"&gt;&lt;img class="stopBtn" src="stopBtn.png"&gt;&lt;/button&gt; 
        &lt;button onclick="document.getElementById('player').volume += 0.1"&gt;&lt;img class="volUp" src="volUp.png"&gt;&lt;/button&gt; &lt;/button&gt; 
        &lt;button onclick="document.getElementById('player').volume -= 0.1"&gt;&lt;img class="volDown" src="volDown.png"&gt;&lt;/button&gt; &lt;/button&gt; 
      &lt;/div&gt;
        &lt;div class="buyDiv"&gt;
          &lt;ul class="buyList"&gt;
            &lt;li class="buyFnt"&gt;BUY&lt;/li&gt;
            &lt;li&gt;&lt;button&gt;&lt;img class="appleLink" src="apple.png"&gt;&lt;/button&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>