How to show an edit link on the profile picture just like the one on facebook but positioned at the right-top corner of the image?

HTML Code:

```
<div class="topgrid">
     <a href="#"><img src="C:/images/users/image1.png"/>               
        <span class="image" id="image">Edit Picture</span>
     </a>
</div>

```

CSS Code:

```
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
right:0;
width:80px;
position:absolute;
}

.topgrid:hover .image{
display:block;
cursor:pointer;
}

.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}

```

​
I am here using the fixed width of the span element, but when I don't specify the width of the span element, the element doesn't appears at the absolute top right-corner . So i have to adjust the right property as:

```
right:13%;

```

which is not the standard way to do it. I need your valuable suggestions!

I am also attaching the tried out fiddle here!

<http://jsfiddle.net/nQvEW/81/>