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.

SEE THE DEMO

Below is the `HTML` code:

&lt;div class="img-wraps">
&lt;span class="closes" title="Delete">×&lt;/span>
 // give image path 
&lt;img class="img-responsive" src="images/image.jpg">
&lt;/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

Below is the HTML code:

Below is the `HTML` code: