how to show delete button in top right corner of Image?

Question

i would like to show delete button at top right corner to image? how could i achieve this?

my html is like this :-

main image :

<img id="' + id + '" src="../Images/DefaultPhotoMale.png" class="' + item + '" width="40" height="40" alt="image" title="' + projectTitle + '" style="cursor:pointer" /> 

x button image to display in top-right of above image

• '<img id="' + item.Soid + '" src="../Images/RemoveButton.ico" style="display:none" title="Remove Specialization" />

No background image set please, i need click event for that delete button something like this :

Answer 1

Usual approach with position: relative and position: absolute.

HTML:

<div class="img-wrap">     <span class="close">&times;</span>     <img src="http://lorempixel.com/100/80"> </div> 

CSS:

.img-wrap {     position: relative;     ... } .img-wrap .close {     position: absolute;     top: 2px;     right: 2px;     z-index: 100;     ... } 

Extended demo (+ JS interaction) http://jsfiddle.net/yHNEv/