Checkbox customize

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

 <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>

<script>
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();
});
});
</script>

CSS:

   .nopad {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



.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;
}

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

Thank you!!!