<div class="slider-css">
<input type="radio" id="slide1" name="slider" checked>
<input type="radio" id="slide2" name="slider">
<input type="radio" id="slide3" name="slider">
<input type="radio" id="slide4" name="slider">
<input type="radio" id="slide5" name="slider">
<div class="slider-css-images-mini">
<label for="slide1">
<img src="image.jpg" alt/>
</label>
<label for="slide2">
<img src="image.jpg" alt/>
</label>
<label for="slide3">
<img src="image.jpg" alt/>
</label>
<label for="slide4">
<img src="image.jpg" alt/>
</label>
<label for="slide5">
<img src="image.jpg" alt/>
</label>
</div>
<div class="slider-css-images">
<img src="image.jpg" alt/>
<img src="image.jpg" alt/>
<img src="image.jpg" alt/>
<img src="image.jpg" alt/>
<img src="image.jpg" alt/>
</div>
</div>
*{box-sizing: border-box}
input[type=radio] {
position: absolute;
left:-9999px
}
.slider-css {
overflow: hidden;
position: relative;
max-width: 600px;
max-height:400px;
margin:2rem auto;
}
.slider-css-images-mini {
position: absolute;
top: 0;
left:0;
display:flex;
z-index: 1;
padding:0 1rem;
}
.slider-css-images-mini label img {
margin-top: .5rem;
cursor: pointer;
border-radius: 5px;
transition: all .3s ease;
max-width: 100%;
}
.slider-css-images-mini label:not(:first-child){
margin-left: .5rem
}
.slider-css-images-mini label img:hover {
filter:drop-shadow(0 0 5px #000)
}
.slider-css-images {
position: relative;
padding-top: 66.67%;
transition: .6s ease-in-out;
}
.slider-css-images img {
max-width:100%;
position: absolute;
left:0;
top:0;
transition: filter .5s ease;
filter:blur(100px) opacity(.5)
}
.slider-css-images img:nth-of-type(2) {
transform: translateX(100%);
}
.slider-css-images img:nth-of-type(3) {
transform: translateX(200%);
}
.slider-css-images img:nth-of-type(4) {
transform: translateX(300%);
}
.slider-css-images img:nth-of-type(5) {
transform: translateX(400%);
}
input[type=radio]:nth-of-type(1):checked ~ .slider-css-images {
transform: translateX(0%);
}
input[type=radio]:nth-of-type(2):checked ~ .slider-css-images {
transform: translateX(-100%);
}
input[type=radio]:nth-of-type(3):checked ~ .slider-css-images {
transform: translateX(-200%);
}
input[type=radio]:nth-of-type(4):checked ~ .slider-css-images {
transform: translateX(-300%);
}
input[type=radio]:nth-of-type(5):checked ~ .slider-css-images {
transform: translateX(-400%);
}
input[type=radio]:nth-of-type(1):checked ~ .slider-css-images img:nth-of-type(1),
input[type=radio]:nth-of-type(2):checked ~ .slider-css-images img:nth-of-type(2),
input[type=radio]:nth-of-type(3):checked ~ .slider-css-images img:nth-of-type(3),
input[type=radio]:nth-of-type(4):checked ~ .slider-css-images img:nth-of-type(4),
input[type=radio]:nth-of-type(5):checked ~ .slider-css-images img:nth-of-type(5) {
filter:blur(0) opacity(1);
}