<style type="text/css">
.slideshow {width:480px; height:120px; padding-top:380px; position:relative; margin:20px auto;}
.slideshow input {position:absolute; display:none;}
.slideshow .largeImages {width:480px; height:360px; position:absolute; left:0; top:0;
filter:drop-shadow(0 3px 5px rgba(0,0,0,0.4));
-webkit-filter:drop-shadow(0 3px 5px rgba(0,0,0,0.4));
}
.slideshow .largeImages img {display:block; position:absolute; left:0; top:0; z-index:10; opacity:0;
transition: 1s;
-webkit-transition: 1s;
transform:scale(1.1);
-webkit-transform:scale(1.1);
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.slideshow .filmstrip {width:430px; height:92px; margin:0 auto; position:relative; overflow:hidden;}
.slideshow .filmstrip .film {position:absolute; left:0; top:0; white-space:nowrap; background:#222 url(slots.gif);
transition:1s;
-webkit-transition:1s;
}
.slideshow .filmstrip label {display:inline-block; width:86px; height:92px; cursor:pointer;}
.slideshow .filmstrip label img {display:block; width:80px; height:60px; margin:16px auto;
transition: 0.5s;
-webkit-transition: 0.5s;
filter: grayscale(1) invert(1);
-webkit-filter: grayscale(1) invert(1);
}
.slideshow .filmstrip label img:hover {
filter: grayscale(1) invert(0);
-webkit-filter: grayscale(1) invert(0);
}
.slideshow .slideLeft {position:absolute; left:0; top:400px;
transition: 0.5s;
-webkit-transition: 0.5s;
filter: grayscale(1) opacity(0.5);
-webkit-filter: grayscale(1) opacity(0.5);
}
.slideshow .slideRight {position:absolute; right:0; top:400px;
transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transition: 0.5s;
-webkit-transition: 0.5s;
filter: grayscale(1) opacity(0.5);
-webkit-filter: grayscale(1) opacity(0.5);
}
.slideshow .filmstrip .shine {width:20px; height:200px; position:absolute; left:-80px; top:-20px; z-index:100;
background-image: linear-gradient(to right, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -webkit-linear-gradient(to right, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
transform:rotate(20deg);
-webkit-transform:rotate(20deg);
transition: 2s;
-webkit-transition: 2s;
}
.slideshow #slideLeft:checked ~ .filmstrip .film {left:0;}
.slideshow #slideRight:checked ~ .filmstrip .film {left:-430px;}
.slideshow #slideLeft:checked ~ .slideRight,
.slideshow #slideRight:checked ~ .slideLeft {cursor:pointer;
filter: grayscale(0) opacity(1);
-webkit-filter: grayscale(0) opacity(1);
}
.slideshow #pic1:checked ~ .largeImages img:nth-of-type(1),
.slideshow #pic2:checked ~ .largeImages img:nth-of-type(2),
.slideshow #pic3:checked ~ .largeImages img:nth-of-type(3),
.slideshow #pic4:checked ~ .largeImages img:nth-of-type(4),
.slideshow #pic5:checked ~ .largeImages img:nth-of-type(5),
.slideshow #pic6:checked ~ .largeImages img:nth-of-type(6),
.slideshow #pic7:checked ~ .largeImages img:nth-of-type(7),
.slideshow #pic8:checked ~ .largeImages img:nth-of-type(8),
.slideshow #pic9:checked ~ .largeImages img:nth-of-type(9),
.slideshow #pic10:checked ~ .largeImages img:nth-of-type(10) {z-index:100; opacity:1;
transition: 1s;
-webkit-transition: 1s;
filter: grayscale(0);
-webkit-filter: grayscale(0);
transform:scale(1);
-webkit-transform:scale(1);
}
.slideshow #pic1:checked ~ .filmstrip .film label:nth-of-type(1) img,
.slideshow #pic2:checked ~ .filmstrip .film label:nth-of-type(2) img,
.slideshow #pic3:checked ~ .filmstrip .film label:nth-of-type(3) img,
.slideshow #pic4:checked ~ .filmstrip .film label:nth-of-type(4) img,
.slideshow #pic5:checked ~ .filmstrip .film label:nth-of-type(5) img,
.slideshow #pic6:checked ~ .filmstrip .film label:nth-of-type(6) img,
.slideshow #pic7:checked ~ .filmstrip .film label:nth-of-type(7) img,
.slideshow #pic8:checked ~ .filmstrip .film label:nth-of-type(8) img,
.slideshow #pic9:checked ~ .filmstrip .film label:nth-of-type(9) img,
.slideshow #pic10:checked ~ .filmstrip .film label:nth-of-type(10) img {
filter: grayscale(0) invert(0);
-webkit-filter: grayscale(0) invert(0);
}
.slideshow #pic1:checked ~ .filmstrip .shine:nth-of-type(1),
.slideshow #pic2:checked ~ .filmstrip .shine:nth-of-type(2),
.slideshow #pic3:checked ~ .filmstrip .shine:nth-of-type(3),
.slideshow #pic4:checked ~ .filmstrip .shine:nth-of-type(4),
.slideshow #pic5:checked ~ .filmstrip .shine:nth-of-type(5),
.slideshow #pic6:checked ~ .filmstrip .shine:nth-of-type(6),
.slideshow #pic7:checked ~ .filmstrip .shine:nth-of-type(7),
.slideshow #pic8:checked ~ .filmstrip .shine:nth-of-type(8),
.slideshow #pic9:checked ~ .filmstrip .shine:nth-of-type(9),
.slideshow #pic10:checked ~ .filmstrip .shine:nth-of-type(10) {
-webkit-animation: shine 0.5s linear;
animation: shine 0.5s linear;
}
@-webkit-keyframes shine {
0% {left:-80px;}
100% {left:500px;}
}
@keyframes shine {
0% {left:-80px;}
100% {left:500px;}
}
</style>
<div class ="slideshow">
    <input name="slides" id="pic1" type="radio">
    <input name="slides" id="pic2" type="radio">
    <input name="slides" id="pic3" type="radio">
    <input name="slides" id="pic4" type="radio">
    <input name="slides" id="pic5" type="radio">
    <input name="slides" id="pic6" type="radio">
    <input name="slides" id="pic7" type="radio">
    <input name="slides" id="pic8" type="radio">
    <input checked="checked" name="slides" id="pic9" type="radio">
    <input name="slides" id="pic10" type="radio">
    <input name="shift" id="slideLeft" type="radio">
    <input checked="checked" name="shift" id="slideRight" type="radio">
    <div class ="largeImages">
	   <img src="pic1.jpg" alt="">
	   <img src="pic2.jpg" alt="">
	   <img src="pic3.jpg" alt="">
	   <img src="pic4.jpg" alt="">
	   <img src="pic5.jpg" alt="">
	   <img src="pic6.jpg" alt="">
	   <img src="pic7.jpg" alt="">
	   <img src="pic8.jpg" alt="">
	   <img src="pic9.jpg" alt="">
	   <img src="pic10.jpg" alt="">
    </div>
    <div class ="filmstrip">
	   <div class ="shine"></div>
	   <div class ="shine"></div>
	   <div class ="shine"></div>
	   <div class ="shine"></div>
	   <div class ="shine"></div>
	   <div class ="shine"></div>
	   <div class ="shine"></div>
	   <div class ="shine"></div>
	   <div class ="shine"></div>
	   <div class ="shine"></div>
	   <div class ="film">
		  <label for="pic1"><img src="pic1.jpg" alt=""></label><label for="pic2"><img src="pic2.jpg" alt=""></label>
<label for="pic3"><img src="pic3.jpg" alt=""></label><label for="pic4"><img src="pic4.jpg" alt=""></label><label for="pic5">
<img src="pic5.jpg" alt=""></label><label for="pic6"><img src="pic6.jpg" alt=""></label><label for="pic7"><img src="pic7.jpg" alt=""></label>
<label for="pic8"><img src="pic8.jpg" alt=""></label><label for="pic9"><img src="pic9.jpg" alt=""></label><label for="pic10">
<img src="pic10.jpg" alt=""></label>
	   </div>
    </div>
    <label class ="slideLeft" for="slideLeft"><img src="left-arrow.png" alt=""></label>
    <label class ="slideRight" for="slideRight"><img src="left-arrow.png" alt=""></label>
</div>