Pure CSS Slide Panel
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);
}