Ich verwende das Bootstrap-Framework für folgende Markierungen.

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

Ich möchte folgendes erreichen:

Ist das überhaupt mit CSS möglich?

Ich würde offensichtlich 3 Staaten brauchen:

Initiale

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

Einige Form des Schwebezustands:

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

Wenn es markiert ist:

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

Kann jemand eine Lösung vorschlagen?