title: roll over effect, show another image
body: <p>I have an href image in this markup. </p>
  
  <pre><code>&lt;div class="imgdiv"&gt;
     &lt;a class="imga" href="http://destination.com"&gt;
        &lt;img src="http://image.com/image.jpg" width="100" height="100"&gt;
     &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I hover over it, I want to show another image in the top right corner. Is this doable with css? or do I need javascript for that?</p>
  
  <p>My CSS looks like this but it still doesn't work</p>
  
  <pre><code>a.imga:hover {
     background-image: url('over.png');
     background-position: top;
     z-index:3;
  }
  </code></pre>