Изображение при наведении курсора - отображать над ним div

Я хочу, чтобы при наведении курсора появлялась ссылка в правом верхнем углу изображения. Точно так же, как на фото в вашем профиле на Facebook, где написано «Изменить изображение».

Я пытался заставить его работать с небольшим количеством jquery, но безуспешно, так как он не идет справа от изображения . Изображения будут разных размеров, так как они являются фотографиями профиля. Поэтому независимо от размера он должен оставаться в верхнем правом углу изображения.

JQuery:

$(".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();
});

HTML:

<div class="imgHover">
    <div class="hover"><a href="htpp://google.com">Edit</a></div>
    <img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="" />
</div>

CSS:

.imgHover .hover { 
    display: none;
    position:absolute;
    z-index: 2;

}

Спасибо!

7
задан ryryan 29 November 2010 в 18:29
поделиться