Слайдр

by Ksenia Polyakova

HTML

<div class="slider_wrpper">
		<div class="slider">
			<input type="radio" name="slider" id="slider1" checked>
			<input type="radio" name="slider" id="slider2">
			<input type="radio" name="slider" id="slider3">
			<input type="radio" name="slider" id="slider4">
			<div class="picture">
				<div class="caption">
					<div class="cap1">
						<h2>Site</h2>
						<p>blog</p>
						<p>3 pages</p>
					</div>
					<div class="cap2">
						<h2>Site</h2>
						<p>blog</p>
						<p>3 pages</p>
					</div>
					<div class="cap3">
						<h2>Site</h2>
						<p>blog</p>
						<p>3 pages</p>
					</div>
					<div class="cap4">
						<h2>Site</h2>
						<p>blog</p>
						<p>3 pages</p>
					</div>
				</div>
				<div class="images img1">
					<div class="part part1"></div>
					<div class="part part2"></div>
					<div class="part part3"></div>
					<div class="part part4"></div>
					<div class="part part5"></div>
					<div class="part part6"></div>
				</div>
				<div class="images img2">
					<div class="part part1"></div>
					<div class="part part2"></div>
					<div class="part part3"></div>
					<div class="part part4"></div>
					<div class="part part5"></div>
					<div class="part part6"></div>
				</div>
				<div class="images img3">
					<div class="part part1"></div>
					<div class="part part2"></div>
					<div class="part part3"></div>
					<div class="part part4"></div>
					<div class="part part5"></div>
					<div class="part part6"></div>
				</div>
				<div class="images img4">
					<div class="part part1"></div>
					<div class="part part2"></div>
					<div class="part part3"></div>
					<div class="part part4"></div>
					<div class="part part5"></div>
					<div class="part part6"></div>
				</div>
			</div>
			<div class="side-controls">
				<label for="slider1"></label>
				<label for="slider2"></label>
				<label for="slider3"></label>
				<label for="slider4"></label>
			</div>
			<div class="active">
				<label for="slider1"></label>
				<label...

CSS

* {
	box-sizing: border-box;
}
.slider {
	position: relative;
	width: 900px;
	height: 400px;
	margin: 60px auto 0;
}
.picture {
	position: relative;
	overflow: hidden;
	border: 8px solid #eee;
	border-radius: 5px;
	box-shadow: 0 7px 20px rgba(0,0,0,.5);
}
.slider input {
	display: none;
}
.picture, .images {
	width: inherit;
	height: inherit;
}
.images {
	position: absolute;
}
.img1 .part { background-image: url(https://www.look.com.ua/large/201209/40666.jpg); }
.img2 .part { background-image: url(http://fonday.ru/images/tmp/16/7/original/16710fBjLzqnJlMXhoFHAG.jpg); }
.img3 .part { background-image: url(https://img.rl0.ru/pgc/o/56bcc7af-d5af-d56f-d5af-d5266738f1db.photo.0.jpg); }
.img4 .part { background-image: url(http://www.pet4me.ru/sites/default/files/imagecache/1000x667/5748_original.jpg); }

.part {
	float: left;
	width: 300px;
	height: 200px;
	opacity: 0;
	z-index: 0;
	transform-origin: right;
  transform: rotateX(360deg);
  transition: transform .8s, opacity .8s;
}
#slider1:checked ~ .picture .img1 .part,
#slider2:checked ~ .picture .img2 .part,
#slider3:checked ~ .picture .img3 .part,
#slider4:checked ~ .picture .img4 .part {
	opacity: 1;
	z-index: 1;
	transform: rotateY(0);
}
.picture .part2 {
	background-position: -300px 0;
	transition-delay: .2s;
}
.picture .part3 {
	background-position: -600px 0;
	transition-delay: .4s;
}
.picture .part4 {
	background-position: 0 -200px;
	transition-delay: .6s;
}
.picture .part5 {
	background-position: -300px -200px;
	transition-delay: .8s;
}
.picture .part6 {
	background-position: -600px -200px;
	transition-delay: 1s;
}
.side-controls label {
	position: absolute;
  display: block;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  margin-top: -15px;
  cursor: pointer;
  transition: opacity .5s;
  opacity: .2;
  width: 50px;
  height: 50px;
}
#slider1:checked ~ .side-controls label:nth-of-type(4),
#slider2:checked ~ .side-controls label:nth-of-type(1),
#slider3:checked ~ .side-controls...