Customize checkbox for images

Im triying to make this box 1:1 with css, but I have so low css skills. Picture of the box -> http://prntscr.com/l6kyob (left - when checkbox clicked, right - when its not), live demo here -> https://victorthemes.com/themes/glazov/gallery/photography-trend/

That's what I've done so far

jQuery(document).ready(function($){
$(".image-checkbox").each(function () {
  if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
    $(this).addClass('image-checkbox-checked');
  }
  else {
    $(this).removeClass('image-checkbox-checked');
  }
});


$(".image-checkbox").on("click", function (e) {
  $(this).toggleClass('image-checkbox-checked');
  var $checkbox = $(this).find('input[type="checkbox"]');
  $checkbox.prop("checked",!$checkbox.prop("checked"))

  e.preventDefault();
});
});

                                      .nopad {
        padding-left: 0 !important;
        padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
        cursor: pointer;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border: 4px solid transparent;
        margin-bottom: 0;
        outline: 0;
}
.image-checkbox input[type="checkbox"] {
        display: none;
}

.image-checkbox-checked {
        border-color: #4783B0;
}
.image-checkbox .fa {
  position: absolute;
  color: #4A79A3;
  background-color: #fff;
  padding: 10px;
  top: 0;
  right: 0;
}
.image-checkbox-checked .fa {
  display: block !important;
}

                            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
                                        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
                                        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />  
  
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="usergalleryimages[]" value="">
      <i class="fa fa-check hidden"></i>
    </label> 
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="usergalleryimages[]" value="">
      <i class="fa fa-check hidden"></i>
    </label> 
  </div>

Please, give me some hints how I can do this.

Thank you!!!