How to create a delete button on the image

This post will explain how to add a delete button on the image. This will help you to delete the image as soon as it’s pressed, but here I explain only the CSS and HTML how to add the delete button above the image and not to delete the image. You can add Jquery to delete the image.

how-to-add-delete-button-image-demo

SEE THE DEMO

Below is the HTML code:

<div class="img-wraps">
<span class="closes" title="Delete">×</span>
 // give image path 
<img class="img-responsive" src="images/image.jpg">
</div>

Below are the CSS to make the span to close button

.img-wraps {
    position: relative;
    display: inline-block;
   
    font-size: 0;
}
.img-wraps .closes {
    position: absolute;
    top: 5px;
    right: 8px;
    z-index: 100;
    background-color: #FFF;
    padding: 4px 3px;
    
    color: #000;
    font-weight: bold;
    cursor: pointer;
   
    text-align: center;
    font-size: 22px;
    line-height: 10px;
    border-radius: 50%;
    border:1px solid red;
}
.img-wraps:hover .closes {
    opacity: 1;
}

Enjoy the code

DEMO