Sheet w/ tabs

<style type="text/css"> .sp-slideshow { position: relative; margin: 10px auto; width: 400px; height: 400px; } .sp-content { background: #7d7f72 url(http://i.imgur.com/CbcVdlx.png) repeat scroll 0 0;position: relative;width: 100%;height: 100%;overflow: hidden;} .sp-parallax-bg {background: url(http://i44.tinypic.com/219vu4k.png) repeat-x scroll 0 0;-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;} .sp-slideshow input {position: absolute;bottom: 15px;left: 50%;width: 9px;height: 9px;z-index: 1001;cursor: pointer;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;} .sp-slideshow input + label {position: absolute;bottom: 15px;left: 50%;width: 6px;height: 6px;display: block;z-index: 1000;border: 3px solid #fff;border: 3px solid rgba(255,255,255,0.9);-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;-webkit-transition: background-color linear 0.1s;-moz-transition: background-color linear 0.1s;-o-transition: background-color linear 0.1s;-ms-transition: background-color linear 0.1s;transition: background-color linear 0.1s;} .sp-slideshow input:checked + label {background-color: #fff;background-color: rgba(255,255,255,0.9);} .sp-selector-1, .button-label-1 {margin-left: -36px;} .sp-selector-2, .button-label-2 {margin-left: -18px;} .sp-selector-3, .button-label-3 {margin-left: 0px;} .sp-selector-4, .button-label-4 {margin-left: 18px;} .sp-selector-5, .button-label-5 {margin-left: 36px;} .sp-arrow {position: absolute;top: 50%;width: 28px;height: 38px;margin-top: -19px;display: none;opacity: 0.8;cursor: pointer;z-index: 1000;background: transparent url(http://i.imgur.com/eYUSsIS.png) no-repeat;-webkit-transition: opacity linear 0.3s;-moz-transition: opacity linear 0.3s;-o-transition: opacity linear 0.3s;-ms-transition: opacity linear 0.3s; transition: opacity linear 0.3s;} .sp-arrow:hover{opacity: 1;} .sp-arrow:active{margin-top: -18px;} .sp-selector-1:checked ~ .sp-arrow.sp-a2, .sp-selector-2:checked ~ .sp-arrow.sp-a3, .sp-selector-3:checked ~ .sp-arrow.sp-a4, .sp-selector-4:checked ~ .sp-arrow.sp-a5 {right: 15px;display: block;background-position: top right;} .sp-selector-2:checked ~ .sp-arrow.sp-a1, .sp-selector-3:checked ~ .sp-arrow.sp-a2, .sp-selector-4:checked ~ .sp-arrow.sp-a3, .sp-selector-5:checked ~ .sp-arrow.sp-a4 {left: 15px;display: block;background-position: top left;} .sp-slideshow input:checked ~ .sp-content {-webkit-transition: background-position linear 0.6s, background-color linear 0.8s;-moz-transition: background-position linear 0.6s, background-color linear 0.8s;-o-transition: background-position linear 0.6s, background-color linear 0.8s;-ms-transition: background-position linear 0.6s, background-color linear 0.8s;transition: background-position linear 0.6s, background-color linear 0.8s;} .sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {-webkit-transition: background-position linear 0.7s;-moz-transition: background-position linear 0.7s;-o-transition: background-position linear 0.7s;-ms-transition: background-position linear 0.7s;transition: background-position linear 0.7s;} .sp-slider { position: relative;left: 0; width: 500%;height: 100%;list-style: none; margin: 0;padding: 0;-webkit-transition: left ease-in 0.8s; -moz-transition: left ease-in 0.8s; -o-transition: left ease-in 0.8s; -ms-transition: left ease-in 0.8s;transition: left ease-in 0.8s; } .sp-slider > li { height:100%; padding:0 60px; width: 20%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float:left; text-align:center; opacity:0.4; -webkit-transition:opacity ease-in 0.4s 0.8s; -moz-transition:opacity ease-in 0.4s 0.8s; -o-transition:opacity ease-in 0.4s 0.8s; -ms-transition:opacity ease-in 0.4s 0.8s; transition:opacity ease-in 0.4s 0.8s; } .sp-slider > li img{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;display: block;margin: 0 auto;padding: 40px 0 50px 0;max-height: 100%;max-width: 100%;} input.sp-selector-1:checked ~ .sp-content .sp-slider {left: 0;} input.sp-selector-2:checked ~ .sp-content .sp-slider {left: -100%;} input.sp-selector-3:checked ~ .sp-content .sp-slider {left: -200%;} input.sp-selector-4:checked ~ .sp-content .sp-slider {left: -300%;} input.sp-selector-5:checked ~ .sp-content .sp-slider {left: -400%;} input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child, input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2), input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3), input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4), input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){ opacity: 1; } @media screen and (max-width: 840px){ .sp-slideshow { height: 345px; } } @media screen and (max-width: 680px){ .sp-slideshow { height: 285px; } } @media screen and (max-width: 560px){ .sp-slideshow { height: 235px; } } @media screen and (max-width: 320px){ .sp-slideshow { height: 158px; } </style> <center> <div class="sp-slideshow"> <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" /> <label for="button-1" class="button-label-1"></label> <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" /> <label for="button-2" class="button-label-2"></label> <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" /> <label for="button-3" class="button-label-3"></label> <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" /> <label for="button-4" class="button-label-4"></label> <input id="button-5" type="radio" name="radio-set" class="sp-selector-5" /> <label for="button-5" class="button-label-5"></label> <label for="button-1" class="sp-arrow sp-a1"></label> <label for="button-2" class="sp-arrow sp-a2"></label> <label for="button-3" class="sp-arrow sp-a3"></label> <label for="button-4" class="sp-arrow sp-a4"></label> <label for="button-5" class="sp-arrow sp-a5"></label> <div class="sp-content"> <div class="sp-parallax-bg"></div> <ul class="sp-slider clearfix"> <li><div style="width:400px; height:400px;"><div style="width: 250px; height: 250px; position: relative; left: 15; top: 75; background-image: url(http://i44.tinypic.com/zvse8m.png);"></div></div></li> <li><div style="width:400px; height:400px;"><div style="width: 250px; height: 250px; position: relative; left: 15; top: 75; background-image: url(http://i44.tinypic.com/zvse8m.png);"></div></div></li> <li><div style="width:400px; height:400px;"><div style="width: 250px; height: 250px; position: relative; left: 15; top: 75; background-image: url(http://i44.tinypic.com/zvse8m.png);"></div></div></li> <li><div style="width:400px; height:400px;"><div style="width: 250px; height: 250px; position: relative; left: 15; top: 75; background-image: url(http://i44.tinypic.com/zvse8m.png);"></div></div></li> <li><div style="width:400px; height:400px;"><div style="width: 250px; height: 250px; position: relative; left: 15; top: 75; background-image: url(http://i44.tinypic.com/zvse8m.png);"></div></div></li> </ul> </div> </div> </center>