title: css move image on :hover
body: <p>I want to make this website logo slide sideways to the button the user hovers over. So when i hover Contact the "mask" slides over to that button.</p>
  
  <p><a href="https://i.stack.imgur.com/2qVN3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2qVN3.jpg" alt="enter image description here"></a></p>
  
  <p>I have 5 menu buttons with one image over the middle button. I want to move the image so it is positioned over the button the user hovers.</p>
  
  <p>The image has class <code>.logo</code> and id <code>#logoID</code>
  the buttons have IDs <code>#Btn1</code>, <code>#Btn2</code>, <code>#Btn3</code>, <code>#Btn4</code>, <code>#Btn5</code>.
  the buttons have class <code>.BtnC1</code>, <code>.BtnC2</code>, <code>.BtnC3</code>, <code>.BtnC4</code>, <code>.BtnC5</code>.</p>
  
  <p>i just started CSS and have almost no knowledge about it. This is what i have so far and i really appreciate any help or guidance... Thanks!</p>
  
  <pre><code>#Btn1:hover ~ #logoID .logo {
      position: -100px
  }
  
  
  #Btn2:hover ~ #logoID .logo {
      position: -50px;
  }
  
  
  #Btn3:hover ~ #logoID .logo {
      position: 0px;
  }
  
  #Btn4:hover ~ #logoID .logo {
      position: 50px;
  }
  
  
  #Btn5:hover ~ #logoID .logo {
      position: 100px;
  }
  </code></pre>