github.com/GregorioDiStefano/go-file-storage@v0.0.0-20161001105139-5707ab351525/static/css/slider.css (about) 1 2 3 .slides { 4 padding: 0; 5 width: 609px; 6 height: 350px; 7 display: block; 8 margin: 0 auto; 9 position: relative; 10 } 11 12 .slides * { 13 user-select: none; 14 -ms-user-select: none; 15 -moz-user-select: none; 16 -khtml-user-select: none; 17 -webkit-user-select: none; 18 -webkit-touch-callout: none; 19 } 20 21 .slides input { display: none; } 22 23 .slide-container { display: block; } 24 25 .slide { 26 top: 0; 27 opacity: 0; 28 width: 609px; 29 display: block; 30 position: absolute; 31 transform: scale(0); 32 } 33 34 .nav label:hover { opacity: 1; } 35 36 .nav .next { right: 0; } 37 38 input:checked + .slide-container .slide { 39 opacity: 1; 40 transform: scale(1); 41 } 42 43 input:checked + .slide-container .nav label { display: block; } 44 45 .nav-dots { 46 width: 100%; 47 bottom: 9px; 48 height: 11px; 49 display: block; 50 position: absolute; 51 text-align: center; 52 } 53 54 .nav-dots .nav-dot { 55 top: -5px; 56 width: 11px; 57 height: 11px; 58 margin: 0 4px; 59 position: relative; 60 border-radius: 100%; 61 display: inline-block; 62 background-color: rgba(0, 0, 0, 0.6); 63 } 64 65 .nav-dots .nav-dot:hover { 66 cursor: pointer; 67 background-color: rgba(0, 0, 0, 0.8); 68 } 69 70 input#img-1:checked ~ .nav-dots label#img-dot-1, 71 input#img-2:checked ~ .nav-dots label#img-dot-2 { 72 background: rgba(0, 0, 0, 0.8); 73 }