* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: -moz-linear-gradient(136deg,rgb(224,195,252) 0%, rgb(142,197,252) 100%);
}
.wrapper {
	position: relative;
	height: 400px;
	width: 100%;

}

.wrapper .img {
	position: absolute;
	height: 100%;
	width: 100%;

}

.wrapper .img img {
	height: 100%;
	width: 100%;
	border-radius: 10px;
	object-fit: cover;
	clip-path: circle(0% at 0% 100%);
	transition: all 0.7s;
}

#radio1:checked ~ .img-1 img {
	clip-path: circle(150% at 0% 100%);
}

#radio2:checked ~ .img-1 img,
#radio2:checked ~ .img-2 img {
	clip-path: circle(150% at 0% 100%);
}

#radio3:checked ~ .img-1 img,
#radio3:checked ~ .img-2 img,
#radio3:checked ~ .img-3 img {
	clip-path: circle(150% at 0% 100%);
}

#radio4:checked ~ .img-1 img,
#radio4:checked ~ .img-2 img,
#radio4:checked ~ .img-3 img,
#radio4:checked ~ .img-4 img {
	clip-path: circle(150% at 0% 100%);
}

#radio5:checked ~ .img-1 img,
#radio5:checked ~ .img-2 img,
#radio5:checked ~ .img-3 img,
#radio5:checked ~ .img-4 img,
#radio5:checked ~ .img-5 img {
	clip-path: circle(150% at 0% 100%);
}


.wrapper .sliders {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	display: flex;
}
.wrapper .sliders label {
	height: 13px;
	width: 13px;
	border: 2px solid #d5e0e0;
	margin: 0 3px;
	cursor: pointer;
	border-radius: 50%;
	transition: all 0.3s ease;
}
#radio1:checked ~ .sliders label.one,
#radio2:checked ~ .sliders label.two,
#radio3:checked ~ .sliders label.three,
#radio4:checked ~ .sliders label.four,
#radio5:checked ~ .sliders label.five {
	width: 35px;
	border-radius: 14px;
	background: #f5f5f5;
}

.sliders label:hover {
	background: #f5f5f5;
}

.wrapper input[type="radio"] {
	display: none;
}