title: Basic CSS Hover Image-Swap?
body: <p>I'm a super beginner at web development and I have a question about trying to "swap" two images. </p>
  
  <p>I have this CSS and markup written but for some reason it does not seem to be working. The second image that's supposed to swap in when hovering over the first image simply lies on top of the first image on the page. </p>
  
  <p>CSS:</p>
  
  <pre><code>.home  {
    margin: 0;
    padding: 0;
    background: url('images/onhome.png') no-repeat;
  }
  
  .home a, .nav a:link, .nav a:visited {
    display: block;
    width: 90px;
    height: 25px;
  }
  
  .home a:hover img {
    visibility: hidden;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="home"&gt;
    &lt;a href="#"&gt;
      &lt;img src="style/images/home.png" width="65" height="18" alt="" /&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm not sure what's going wrong, and I'd be very appreciative if someone can help me. If there's another better way to do this, I would be definitely open to that too.</p>