title: Show image over another image on hover
body: <p>I have the following code: <a href="http://jsfiddle.net/h8MDp/" rel="nofollow">JSFiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="profile-image"&gt;
    &lt;a href="#"&gt;&lt;img src="image.png" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.profile-image img {
    width: 48px;
    height: 48px;
    position: absolute;
    left: 12px;
    top: 12px;
    border-radius: 500px;
    display: block;
  }
  </code></pre>
  
  <p>The image tag in the HTML <em>must</em> be there.</p>
  
  <p>How can I make it so that when you hover over the image in the image tags, it shows another image over top of it?</p>