How to create an Image Radio Button with label visible

Question

I have an image radio button, however, I want the label to be visible below the image centered?

However, the label is appearing over the top of the image?

How can I get the label nicely aligned below the image?

Here's an example: https://codepen.io/anon/pen/dBYWaK

<div class="cc-selector">
   <input id="cat" type="radio" name="credit-card" value="cat" />
   <label class="drinkcard-cc cat" for="cat">Heading 1</label>
   <input id="dog" type="radio" name="credit-card" value="dog" />
   <label class="drinkcard-cc dog" for="dog">Heading 2</label>
</div>

Answer 1

I would group the input and label inside a div and and use the background in the input instead of the label.

#cc-selector .card{
    display: inline-block;
}

#cc-selector input{
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;

}

#cc-selector .background {
    width: 100px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
    filter: brightness(1.8) grayscale(1) opacity(.7);
    outline: none;
}

#cc-selector .card.cat .background {
    background-image: url(http://placekitten.com/400/300);
}

#cc-selector .card.dog .background {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg);
}

#cc-selector .background:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
    filter: brightness(1.2) grayscale(.5) opacity(.9);
}

#cc-selector input:checked {
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
    color: red;
}

#cc-selector label{
    text-align: center;
    width: 100%;
    display: block;
}

<div id="cc-selector">
    <div class="card cat">
        <input class="background" id="cat" value="cat" name="animal" type="radio" />
        <label for="cat">Cat</label>
    </div>
    <div class="card dog">
        <input class="background" id="dog" value="dog" name="animal" type="radio" />
        <label for="dog"> Dog</label>
    </div>
</div>

Answer 2

Your can use

.drinkcard-cc {
  padding-top:80px;
}