/* You can remove this page div in your website */ #page{ width:100%; height:100%; position:absolute; } /* Our normalize css */ *{ margin:0; box-sizing: border-box; } /* Our wrapper */ .wrapper{ width: 900px; height: 600px; position: absolute; left:50%; top:50%; transform:translate3d(-50%,-50%,0); overflow:hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } /* Our image information */ .before, .after { width:100%; height:100%; background-repeat:no-repeat; background-color: white; background-size: cover; background-position: center; position: absolute; top:0; left:0; pointer-events:none; overflow: hidden; } .content-image{ height:100%; } .after{ width:125px; } .scroller{ width: 50px; height:50px; position: absolute; left:100px; top:50%; transform:translateY(-50%); border-radius:50%; background-color: transparent; opacity:0.9; pointer-events:auto; cursor: pointer; } .scroller:hover{ opacity:1; } .scrolling{ pointer-events:none; opacity:1; // z-index: 1; } .scroller__thumb{ width:100%; height:100%; padding:5px; } .scroller:before, .scroller:after{ content:" "; display: block; width: 7px; height: 9999px; position: absolute; left: 50%; margin-left: -3.5px; z-index: 30; transition:0.1s; } .scroller:before{ top:100%; } .scroller:after{ bottom:100%; } /* If you want to cahnge the colors, make sure you change the fill in the svgs to match */ .scroller{ border: 5px solid #fff; } .scroller:before, .scroller:after{ background: #fff; }