.ba-slider { position: relative; overflow: hidden; } #image-shown-color { max-width: none; } .resize { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; display: flex; } .handle { /* Thin line seperator */ position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #FFF; cursor: ew-resize; z-index: 2; } .handle:after { position: absolute; top: 50%; width: 50px; height: 50px; margin: -23px 0 0 -28px; content: ""; color: white; border: 3px solid #fff; border-radius: 50%; transition: all 0.3s ease; -webkit-box-shadow: 0 0 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 0 12px rgba(51, 51, 51, 0.5); box-shadow: 0 0 12px rgba(51, 51, 51, 0.5); } .draggable:after { width: 38px; height: 38px; margin: -17px 0 0 -22px; } .handle > span { border: 6px inset transparent; top: 50%; position: absolute; } .handle > .handle-left { border-right: 6px solid white; margin-left: -20px; } .handle > .handle-right { border-left: 6px solid white; margin-left: 8px; } /* The icon on the orange knob jumps on mobile devices */ @media (max-width: 481px) { .handle:after { line-height: 1.5em; } } #colorization-toggle { cursor: pointer; right: 0; position: absolute; } #colorization-toggle > img { width: 50px; }