<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <form> <div class="payment-selector"> <input id="creditcard" type="radio" name="credit-card" value="creditcard" checked/> <label class="payment-method creditcard" for="creditcard"></label> &nbsp <input id="paypal" type="radio" name="credit-card" value="paypal" /> <label class="payment-method paypal"for="paypal"></label> </div> </form> </div> </div>

.payment-selector input{ margin:0;padding:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; } .creditcard{ 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-image:url(https://static.shoplightspeed.com/shops/606600/files/001462255/cards.jpg); */background-position: left ; background-repeat: no-repeat; } .paypal{ background-image:url(https://www.paypalobjects.com/webstatic/en_US/i/buttons/PP_logo_h_150x38.png); background-position: left ; background-repeat: no-repeat; } .payment-selector input:active +.payment-method{opacity: .9;} .payment-selector input:checked +.payment-method{ -webkit-filter: none; -moz-filter: none; filter: none; } .payment-method{ cursor:pointer; background-size:contain; background-repeat:no-repeat; display:inline-block; width:100px;height:70px; -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); } .payment-method: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); } /* Extras */ /*a:visited{color:#888} a{color:#444;text-decoration:none;} p{margin-bottom:.3em;} */