Radio Buttons With Images - BIZAMAJIG USAGE

FOR COMPLETE EXAMPLE SEE: https://gist.github.com/rcotrina94/7828886

HTML

<form>
    <p>Normal Radio Buttons:</p>
    <div>
        <input checked="checked"  id="a1" type="radio" name="a" value="visa" />
        <label for="a1">Visa</label><br/>
        <input id="a2" type="radio" name="a" value="mastercard" />
        <label for="a2">Mastercard</label>
    </div>
    <p>Now with Custom CSS</p>
    <div class="field-radio-image">
        <input id="visa2" type="radio" name="creditcard" value="visa" />
        <label class="radio-image-label visa" for="visa2"></label>
        <input  checked="checked" id="mastercard2" type="radio" name="creditcard" value="mastercard" />
        <label class="radio-image-label mastercard"for="mastercard2"></label>
        <input id="visa3" type="radio" name="creditcard" value="visa" />
        <label class="radio-image-label visa" for="visa3"></label>
    </div>
    <div class="form-group field_list field-radio-image">
		3 Columns
        <br />
		Header above menu
        <br />
        <br />
        <input type="radio" value="Fixed-Sidebar-Left Fixed-Content Fixed-Sidebar-Right; Primary Horizontal Center Secondary Submenu;" name="creditcard" id="metadata__primary_nav__identifier__public_site-3-1" />
		<label for="metadata__primary_nav__identifier__public_site-3-1" class="radio-image-label metadata__primary_nav__identifier__public_site-3-1">
		</label>
        <br />
	</div>
</form>

CSS

/*
.field-radio-image-2 input {
    margin: 0;
    padding: 0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
*/
.field-radio-image input {
    position: absolute;
    z-index: 999;
}
.metadata__primary_nav__identifier__public_site-3-1 {
    background-image: url(//bizamajig.com/resources/bizamajig/art/meta-ia-layout-3-1.jpg);
}
.visa {
    background-image: url(http://i.imgur.com/lXzJ1eB.png);
}
.mastercard {
    background-image: url(http://i.imgur.com/SJbRQF7.png);
}
.field-radio-image input:active +.radio-image-label {
    opacity: .9;
}
.field-radio-image input:checked +.radio-image-label {
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.radio-image-label {
    width: 100px;
    height: 70px;
    display: inline-block;
    cursor: pointer;
    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);
}
.radio-image-label: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);
}
.field-radio-image input {
    margin: 5px 0 0 12px; 
}
.field-radio-image label {
    margin-left: 7px;
}
span.radio-image {
    color: #6d84b4;
}