Pure CSS Slide Panel

motorhead
motorhead
motorhead
motorhead

CSS

html,body,figure { margin: 0; padding: 0; } body, .btn { background:#000;/* change color as you wish */ color:#666; } h1 { color:#fff; font-size:2.5em; text-align: center; } img { display: block; width: 100%; } .slide { overflow:hidden; width:340px; margin:1em auto; padding: 1em 0; position:relative; text-align: center; box-shadow: inset 0 0 5em 0 #fff; } .photos { width: 1760px; height: 300px; position: relative; } .photo { float:left; width: 300px; position: relative; padding: 0 20px; } .input { position: absolute; clip:rect(0,0,0,0); } .btn { display: inline-block; padding:0.3em; cursor: pointer; text-align: center; } .btn:hover { color:#fff; text-shadow:0 0 0.1em #eee; } .btn-inside { position: absolute; box-shadow: 0 0 0.2em #000; border-radius: 50%; font-size:2em; font-family: arial; height: 1em; width: 1em; line-height: 0.9; top:180px; } .btn-outside { padding:0 1em; margin-top:1em; } .next { right:-0.6em; } .prev { left:-0.6em; } .btn-inside { display:none; } #go1:checked ~ .photos #p1 .btn-inside, #go2:checked ~ .photos #p2 .btn-inside, #go3:checked ~ .photos #p3 .btn-inside, #go4:checked ~ .photos #p4 .btn-inside { display:inline-block; } #go1:checked ~ .go1, #go2:checked ~ .go2, #go3:checked ~ .go3, #go4:checked ~ .go4 { box-shadow: inset 0 0 1em rgba(255,255,255,0.5); } /* animations */ .btn, .photos { -webkit-transition:0.4s; -moz-transition:0.4s; transition:0.4s; } #go1:checked ~ .photos { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } #go2:checked ~ .photos { -webkit-transform: translate3d(-340px,0,0); -moz-transform: translate3d(-340px,0,0); transform: translate3d(-340px,0,0); } #go3:checked ~ .photos { -webkit-transform: translate3d(-680px,0,0); -moz-transform: translate3d(-680px,0,0); transform: translate3d(-680px,0,0); } #go4:checked ~ .photos { -webkit-transform: translate3d(-1020px,0,0); -moz-transform: translate3d(-1020px,0,0); transform: translate3d(-1020px,0,0); }