Eu tenho a seguinte marcação usando a estrutura de inicialização.

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

Eu gostaria de conseguir o seguinte:

Existe alguma maneira de fazer isso usando CSS?

Eu obviamente precisaria de 3 estados:

Inicial:

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

Alguma forma de estado de foco:

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

Quando está marcado:

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

Alguém pode sugerir uma solução?