<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <form class="form"> <section class="payment-type"> <h2>Select a payment type:</h2> <input class="pm" type="radio" name="radio3" id="credit" value="credit"> <label class="credit-label four col" for="credit"></label> <input class="pm" type="radio" name="radio3" id="paypal" value="paypal" checked> <label class="paypal-label four col" for="paypal"></label> </section> </form> </div> </div>

.payment-type input{ -webkit-appearance:none; -moz-appearance:none; appearance:none; } .payment-type input:active +.paypal-label{opacity: .9;} .payment-type input:checked +.paypal-label{ -webkit-filter: none; -moz-filter: none; filter: none; } .payment-type input:active +.credit-label{opacity: .9;} .payment-type input:checked +.credit-label{ -webkit-filter: none; -moz-filter: none; filter: none; } .four { width: 50%; max-width: 32.26%; } .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .form .plan input, .form .payment-plan input, .form .payment-type input{ display: none; } .form label{ color: #fff; font-size: 20px; text-align: center; height: 50px; width: 100%; display: block; cursor: pointer; border: 3px solid transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form .payment-type input:checked + label:after{ content: "\2713"; width: 20px; height: 20px; line-height: 15px; border-radius: 100%; background-color: #2fcc71; z-index: 999; position: absolute; top: -10px; right: -10px; opacity: .9; } .credit-label{ background-image:url(http://bootstrap-ecommerce.com/main/images/icons/pay-visa.png), url(http://bootstrap-ecommerce.com/main/images/icons/pay-mastercard.png), url(http://bootstrap-ecommerce.com/main/images/icons/pay-american-ex.png); background-repeat: no-repeat; } .paypal-label{ background-image:url(https://www.paypalobjects.com/webstatic/en_US/i/buttons/PP_logo_h_150x38.png); background-repeat: no-repeat; } .credit-label, .paypal-label { -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); } .credit-label:hover, .paypal-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); }