title: Make image appear on link hover css
body: <p>I am working with this, probably simple solution, but I couldn't find any help on stackoverflow or the internet relating to this specific problem. </p>
  
  <p>I have a menu, and I want to make an image appear under the link or close by when you hover over it. I hope this can be done in CSS. This is my code so far.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
  
          &lt;link rel="stylesheet" type="text/css" href="startpage.css"&gt;
  
  
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;/head&gt;
      &lt;body&gt;
       &lt;div id="wrapper"&gt;
  
  
           &lt;img id="baggrund" width="166" height="327" alt="back image" src="images/laerkeryg.jpg"/&gt;
           &lt;img id="cirkler" width="319" height="249" alt="circles" src="images/circles.PNG"/&gt;
           &lt;div id="header"&gt;/jacob gerlif pilegaard/&lt;/div&gt;
           &lt;div id="underheader"&gt;portfolio&lt;/div&gt;   
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="about.html"&gt;about&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="gallery.html"&gt;gallery&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact.html"&gt;contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt; 
           &lt;/div&gt;
       &lt;img id="menucircle" width="50" height="50" alt="menu circle" src="images/circle.PNG"/&gt;
            &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is the CSS so far:</p>
  
  <pre><code>a:hover
  {
      background-image: url('image/circle.PNG');
      background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>Hope you guys can help me!</p>