.customize-control-kirki-radio-image { position: relative; label { position: relative; display: inline-block; .image-label { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.7); font-weight: bold; .inner { width: 100%; height: 100%; text-align: center; padding: 0.5em; vertical-align: middle; } } &:hover { .image-label { display: block; } } } input { img { border: 1px solid transparent; } display: none; &:checked { + label { img { -webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,.25); box-shadow: 0 0 5px 2px rgba(0,0,0,.25); border: 1px solid #3498DB; } } } + label .image-clickable { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; } } .kirki-controls-loading-spinner { position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; z-index: 999; text-align: center; background-color: #eee; > div { margin-top: 20px; width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: kirkibouncedelay 1.4s infinite ease-in-out both; animation: kirkibouncedelay 1.4s infinite ease-in-out both; } .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } } } @-webkit-keyframes kirkibouncedelay { 0%, 100%, 80% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1.0); } } @keyframes kirkibouncedelay { 0%, 100%, 80% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } }