how to show delete button in top right corner of I

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

You might try this:

<div style="position:relative; width:'mainimagewidth'">
main image<img src="" />
<span style="position:absolute; top:0; right:0;">ximage<img src="" /></span>
</div>

Answer 2

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/

Answer 3

I have coded one up for you http://jsfiddle.net/PPN7Q/

You need to wrap the image in a DIV

<div class="thumbnail">
<img src="http://96pix.com/images/renee-v.jpg" />
 <a href="">Delete</a>
</div>

and apply the following CSS rules

.thumbnail {
width:50px;
height:50px;
position:relative;
}

.thumbnail img {
max-width:100%;
max-height:100%;
}

.thumbnail a {
display:block;
width:10px;
height:10px;
position:absolute;
top:3px;
right:3px;
background:#c00;
overflow:hidden;
text-indent:-9999px;
}

Answer 4

<div style=" float: right;margin-left: 289px;position: absolute;">*</div>
<img src="score.png" width="300" height="300" />

Please try this. It might help.

Answer 5

Try something like

<div style="position: relative">
    <img src="http://www.google.co.in/images/srpr/logo4w.png" />
    <img src="http://wecision.com/enterprise/images/icons/closeIcon.png" style="position: absolute; top: 4px; right: 5px"/>
</div>

Demo: Fiddle

Answer 6

In my opinion you can just set style="position:absolute;top:0px;right:0px;" for RemoveButton.ico and style="position:relative;" for div with img