title: Changing image on hover
body: <p>I need a menu consisting of images and the images should change when someone hover around it.</p>
  <h2>HTML</h2>
  <pre><code>&lt;div id=&quot;menu&quot; &gt;  
      &lt;a href=&quot;#&quot; id=&quot;home&quot;&gt;&lt;img  src=&quot;images/about.png&quot; alt=&quot;logo&quot; /&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <h2>CSS</h2>
  <pre><code>#menu {
          margin-left    : 353px;
          margin-top     : -70px;
          padding-bottom : 16px;
  }
  
  #home {
          background     : transparent url(images/about.png);
          z-index        : 1;
  }
  
  #home:hover {
          background     : url(images/aboutR.png);
          z-index        : 2;
  }
  </code></pre>
  <p>The problem I am facing is that when I <strong>hover</strong> around the menu item, the image to be displayed on hover is displayed <strong>at the back of</strong> the old image. Moreover, the hover background image displayed is <strong>very small</strong> in width and height. Please help out. Thanks</p>