#slide
1:
checked ~ .slider .img
1
.frag, #slide
2:
checked ~ .slider .img
2
.frag, #slide
3:
checked ~ .slider .img
3
.frag,
#slide
4:
checked ~ .slider .img
4
.frag, #slide
5:
checked ~ .slider .img
5
.frag, #slide
6:
checked ~ .slider .img
6
.frag {
transform: rotateY(
0
) translateZ(
0
) scale(
1
);
-webkit-filter: saturate(
1
) blur(
0
) brightness(
1
) contrast(
1
);
opacity:
1
;
z-index
:
1
;
}
.controls {
position
:
absolute
;
bottom
:
-50px
;
left
:
50%
;
margin-left
:
-115px
;
}
.controls label {
display
:
block
;
height
:
10px
;
width
:
30px
;
float
:
left
;
background-color
:
#000
;
margin-right
:
10px
;
cursor
:
pointer
;
opacity: .
2
;
transition: opacity .
5
s;
}
.controls label:hover, .side-controls label:hover,
#slide
1:
checked ~ .controls label:nth-of-type(
1
),
#slide
2:
checked ~ .controls label:nth-of-type(
2
),
#slide
3:
checked ~ .controls label:nth-of-type(
3
),
#slide
4:
checked ~ .controls label:nth-of-type(
4
),
#slide
5:
checked ~ .controls label:nth-of-type(
5
),
#slide
6:
checked ~ .controls label:nth-of-type(
6
) { opacity: .
8
; }
.side-controls label {
position
:
absolute
;
display
:
block
;
border-top
:
30px
solid
transparent
;
border-bottom
:
30px
solid
transparent
;
top
:
50%
;
margin-top
:
-15px
;
cursor
:
pointer
;
opacity: .
2
;
transition: opacity .
5
s;
}
#slide
1:
checked ~ .side-controls label:nth-of-type(
6
),
#slide
2:
checked ~ .side-controls label:nth-of-type(
1
),
#slide
3:
checked ~ .side-controls label:nth-of-type(
2
),
#slide
4:
checked ~ .side-controls label:nth-of-type(
3
),
#slide
5:
checked ~ .side-controls label:nth-of-type(
4
),
#slide
6:
checked ~ .side-controls label:nth-of-type(
5
) {
left
:
-40px
;
border-right
:
40px
solid
#000
;
}
#slide
1:
checked ~ .side-controls label:nth-of-type(
2
),
#slide
2:
checked ~ .side-controls label:nth-of-type(
3
),
#slide
3:
checked ~ .side-controls label:nth-of-type(
4
),
#slide
4:
checked ~ .side-controls label:nth-of-type(
5
),
#slide
5:
checked ~ .side-controls label:nth-of-type(
6
),
#slide
6:
checked ~ .side-controls label:nth-of-type(
1
) {
right
:
-40px
;
border-left
:
40px
solid
#000
;
}
#slide
2:
checked ~ .slider .captions .c
2
,
#slide
1:
checked ~ .slider .captions .c
1
,
#slide
3:
checked ~ .slider .captions .c
3
,
#slide
4:
checked ~ .slider .captions .c
4
,
#slide
5:
checked ~ .slider .captions .c
5
,
#slide
6:
checked ~ .slider .captions .c
6
{
text-shadow
:
0
0
0
rgba(
255
,
255
,
255
,.
9
) }