imgsl.css

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

body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: rgba(255, 255, 0, 0.451);
}

.wrapper{
    position: relative;
    height:650px;
    width:1400px;
         
}
.wrapper .img{
    position: absolute;
    height:100%;
    width:100%;
    
}
.wrapper .img img{
    height:100%;
    width:100%;   
    object-fit: cover; 
    clip-path: circle(0% at 0% 100%);
    transition: all 0.7s ;
}

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

.wrapper .sliders{
    position:absolute;
    bottom:20px;
    left:50%;
    transform: translateY(-50%);
    z-index:999;
    display: flex;
}

.wrapper .sliders label{
    height: 20px;
    width: 20px;
    border: 2px solid black;
    margin: 0 3px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

#one:checked ~ .sliders label.one,
#two:checked ~ .sliders label.two,
#three:checked ~ .sliders label.three,
#four:checked ~ .sliders label.four{
    width: 35px;
    border-radius: 14px;
    background:rgb(0, 157, 255);
}

.sliders label:hover{
    background:rgb(0, 157, 255);
}

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