carsoule slider

html { background:radial-gradient(#238dbb, #114476); height:100%; text-align:center; font-family:Helvetica; font-size:3em; color:#134c7e; } input.set { display:none; } #slide1:checked ~ .mask .overflow { margin-left:0; } #slide2:checked ~ .mask .overflow { margin-left:-100%; } #slide3:checked ~ .mask .overflow { margin-left:-200%; } #slide4:checked ~ .mask .overflow { margin-left:-300%; } #slides { margin:50px auto; width:80%; position:relative; } #slides .mask { width:90%; overflow:hidden; margin:auto; } #slides .overflow { width:400%; -webkit-transform:translateZ(0); -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; } #slides .slide { width:25%; height:200px; line-height:200px; float:left; background:#fff; } #controls { width:100%; } #controls label { display:none; width:5%; height:60px; opacity:0.3; position:absolute; top:50%; margin-top:-30px; cursor:pointer; background:#000; } #controls label:hover { opacity:0.8; } #slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4) { right:0; display:block; } #slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3) { left:0; display:block; }