Hover image - display div over it

Question

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\".

I have tried to to get it wo

Answer 1

This is the way I done it: CSS:

.imgHover {
    display: inline;
    position: relative;
}
.imgHover .hover {
    display: none;
    position: absolute;
    right:0;
    z-index: 2;
}

HTML:

Edit

JQuery:

$(function() {
    $(".imgHover").hover(
        function() {
            $(this).children("img").fadeTo(200, 0.85).end().children(".hover").show();
        },
        function() {
            $(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
        });
});

Test this on jsfiddle.