title: HTML/CSS mouse hover image hides
body: <p>I have 2 images, 1 shows the word "home" and another shows "home" with some arrows pointing to it from above.. basically a little thing to spice up my website that im working on as part of my studies.</p>
  
  <p>What would be the easiest way to transition from the blank image to the arrow' image?
  without using fancy JavaScript? i don't like javascript and would prefer not to use it.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="styles/styles.css" /&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;This is my website :D&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="banner"&gt;&lt;img id="logo" src="images/logo.png" /&gt;
          &lt;div id="menucontainer"&gt;
              &lt;div class="menulink" id="menu1"&gt;&lt;a href="index.html"&gt;&lt;img border="0" id="arrow1" src="images/arrow1blank.png" /&gt;&lt;img border="0" id="arrow1popup" src="images/arrow1.png"  /&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="menulink" id="menu2"&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/div&gt;
              &lt;div class="menulink" id="menu3"&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/div&gt;
              &lt;div class="menulink" id="menu4"&gt;&lt;a href="#"&gt;Account&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>#banner {
      background-color:#000000;
      height:100px;
      position:absolute;
      top:0;
      left:0;
      right:0;
  }
  #logo {
      position:absolute;
      left:350px;
  }
  #menucontainer {
      position:relative;
      left:750px;
      top:0px;
      right:350px;
      height:100px;
  }
  #menu1 {
      float:left;
      text-align:center;
      width:120px;
      height:100px;
  }
  #menu2 {
      float:left;
      width:120px;
      text-align:center;
      height:100px;
  }
  #menu3 {
      float:left;
      text-align:center;
      width:120px;
      height:100px;
  }
  #menu4 {
      float:left;
      width:120px;
      text-align:center;
      height:100px;
  }
  </code></pre>
  
  <p>Thanks in advance guys :)</p>