title: How to fix 'Hover text to image, text keeps it's original position and img changes in background'
body: <p>I'm creating a webpage and was wondering when I hover over a part of text (in span) how I can keep it in it's position and make the image appear in the background, so the text can go over it.</p>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;html&gt;
  
      &lt;link REL=StyleSheet HREF="HOVERTEST_02.css" TYPE="text/css" MEDIA=screen /&gt;
  
      &lt;h1&gt;FS STUDIO&lt;/h1&gt;
  
      &lt;h2&gt;&lt;span&gt;Automation(FS1920)&lt;/span&gt;.
          &lt;img src="https://www.applerubber.com/blog/wp-content/uploads/2015/07/Float_Glass_Unloading.jpg"/&gt;
      &lt;/h2&gt;
  
  &lt;h2&gt;&lt;span&gt;Platforms(1819)&lt;/span&gt;
      &lt;img src="https://njmonthly.com/wp-content/uploads/cache/2018/11/Amazon_AFradkin_4440b/1072634020.jpg"/&gt;
  &lt;/h2&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>img{
      display:none;
  }
  
  span:hover + img{
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: auto;
      margin-bottom: auto;
      height: 600;
      width: device-width;
      opacity: 0.8;
  }
  </code></pre>