Slider transition filtres CSS


Can I Use css-filters? Data on support for the css-filters feature across the major browsers from caniuse.com.




<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);
	
}