how to show delete button in top right corner of Image?
Usual approach with position: relative and position: absolute.
HTML:
<div class="img-wrap"> <span class="close">×</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/
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;}