У меня есть следующая разметка с использованием платформы начальной загрузки.

<div class="col-md-4">
  <div class="custom-container">
    <img class="center-block img-responsive img-circle invite-contact-trybe" src="{$img}" alt="Contact Image">
    <input class="invite-contact-checkbox" type="checkbox">
  </div>
</div>

Я хотел бы добиться следующего:

Есть ли способ сделать это с помощью CSS?

Очевидно, мне нужно 3 состояния:

Начальное:

.custom-container input[type=checkbox]{}

Некоторая форма состояния при наведении:

.custom-container input[type=checkbox]:hover{}

Когда это проверено:

.custom-container  input[type=checkbox]:checked{}

Кто-нибудь может предложить решение?