Easiest way to display a check mark over image when a checkbox input is selected?

Issue

I've made the checkbox input invisible and put it over the image so that I could use the image like a checkbox, however, now I need to somehow indicate when an image has been selected and deselected. This is why I'm trying to add a check mark over the image when selected and remove it if deselected. Sadly, I am not sure what the best approach is.

Should I display another image over the selected image? Should I make the check mark using pure CSS so I don't have to use an image. How would I go about implementing the change?

.categories-wrapper {
    position: relative;
}
.category-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

<div class="categories-wrapper">
    <img src='https://66.media.tumblr.com/4f3cbb1b66a76a19a9794a162373abc5/tumblr_inline_n258pbAEBc1qhwjx8.png' alt='Random image' />
    <input class='category-input' type="checkbox" name="categories[]" value="">
    <input type="hidden" name="categoryFiles[]" value="">
</div>

Solution

Just add a label next to the checkbox and map it to the checkbox using id-for mapping. In css we will give the style to the label whenever the checkbox is checked using :checked selector. You can put you image in the label.

.categories-wrapper {
    position: relative;
}
.category-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}
.category-input:checked + label{
background:red; /* put your image here*/
 height: 50px;
  width: 50px;
  position: absolute;
 top:0;
 left:0;
}

<div class="categories-wrapper">
    <img src='https://66.media.tumblr.com/4f3cbb1b66a76a19a9794a162373abc5/tumblr_inline_n258pbAEBc1qhwjx8.png' alt='Random image' />
    <input class='category-input' type="checkbox" id='checker' name="categories[]" value="">
    <label for="checker"></label>
    <input type="hidden" name="categoryFiles[]" value="">
</div>

Answered By - Ankit Chaudhary