How to use images for radio buttons (input-radio) #css

index.html

<form>
    <div class="cc-selector">
        <input id="visa" type="radio" name="credit-card" value="visa" />
        <label class="drinkcard-cc visa" for="visa"></label>
        <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
        <label class="drinkcard-cc mastercard"for="mastercard"></label>
    </div>
</form>

radio.css

.cc-selector input {
  margin: 0;
  padding: 0;
  appearance: none;
  visibility: hidden;
}

.visa {
  background-image: url('http://i.imgur.com/lXzJ1eB.png');
}

.mastercard {
  background-image: url('http://i.imgur.com/SJbRQF7.png');
}

.cc-selector input:active + label {
  opacity: 0.9;
}

.cc-selector input:checked + label {
  filter: none;
}

.drinkcard-cc {
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 100px;
  height: 70px;
  transition: all 100ms ease-in;
  filter: brightness(1.8) grayscale(1) opacity(.7);
}

.drinkcard-cc:hover {
  filter: brightness(1.2) grayscale(.5) opacity(.9);
}