title: Hover image - display div over it
body: <p>On hover I want a link apear at the top-right of the image. Just like on your profile picture on Facebook, where it says "Change Picture".</p>
  
  <p>I have tried to to get it working with a bit of jquery but had no luck, as it doesn't go t the right of the image. The images are going to be different sizes as they are profile pictures. So whatever the size, it needs to stay at the top-right of the image.</p>
  
  <p>JQuery:</p>
  
  <pre><code>$(".imgHover").hover(function() {
      $(this).children("img").fadeTo(200, 0.25)
             .end().children(".hover").show();
  }, function() {
      $(this).children("img").fadeTo(200, 1)
             .end().children(".hover").hide();
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="imgHover"&gt;
      &lt;div class="hover"&gt;&lt;a href="htpp://google.com"&gt;Edit&lt;/a&gt;&lt;/div&gt;
      &lt;img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.imgHover .hover { 
      display: none;
      position:absolute;
      z-index: 2;
  
  }
  </code></pre>
  
  <p>Thanks!</p>