Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

Diaporama (responsive) CSS effet de surbrillance

Dernière modification : octobre 2022



<div class=cadre-slider>
<div class="slider">
<input class="slideshow" type="radio" id="slide1" name="slideshow" checked="checked">
<input class="slideshow" type="radio" id="slide2" name="slideshow">
<input class="slideshow" type="radio" id="slide3" name="slideshow">
<input class="slideshow" type="radio" id="slide4" name="slideshow">
<input class="slideshow" type="radio" id="slide5" name="slideshow">
	
<span class="slide"></span>
<span class="slide"></span>
<span class="slide"></span>
<span class="slide"></span>
<span class="slide"></span>
	
<div class="cadre-miniatures">
<label class="miniatures" for="slide1"></label>
<label class="miniatures" for="slide2"></label>
<label class="miniatures" for="slide3"></label>
<label class="miniatures" for="slide4"></label>
<label class="miniatures" for="slide5"></label>
</div>
</div>
</div>




*,*::before,*::after{box-sizing: border-box}

	
input[type=radio] {
	
position: absolute;
left:-9999px
	
}
	
.cadre-slider{ 
max-width: 600px;
overflow: hidden;
aspect-ratio:3/2;
position: relative;
border-radius: 5px;
margin: 4rem auto;
	
	}	
	

@supports not (aspect-ratio:3/2){
		
.slider {

padding-top: 66.67%;
		
	}
		
		
	}	

.slide {
	
position: absolute;
top: 0;
left: 0;
opacity: 0;
will-change: opacity;
transition: opacity .6s
}
	

.slide:nth-of-type(1)::before,
.slide:nth-of-type(2)::before,
.slide:nth-of-type(3)::before,
.slide:nth-of-type(4)::before,
.slide:nth-of-type(5)::before{
content: '';  
width: 0;
height: 100%;
position: absolute;
top: 0;
left: -100%;
filter: blur(30px);
background: hsla(0, 0%, 100%, 0.6);
will-change:transform;
transform: skewX(-20deg)}	
	
.slideshow:nth-of-type(1):checked ~ .slide:nth-of-type(1)::before,
.slideshow:nth-of-type(2):checked ~ .slide:nth-of-type(2)::before,
.slideshow:nth-of-type(3):checked ~ .slide:nth-of-type(3)::before,
.slideshow:nth-of-type(4):checked ~ .slide:nth-of-type(4)::before,
.slideshow:nth-of-type(5):checked ~ .slide:nth-of-type(5)::before{
left: 200%;
width: 20%;
transition: all 1.8s cubic-bezier(.6,1,.4,1)
}
	


	
	
	
.slideshow:nth-of-type(1):checked ~ .slide:nth-of-type(1),
.slideshow:nth-of-type(2):checked ~ .slide:nth-of-type(2),
.slideshow:nth-of-type(3):checked ~ .slide:nth-of-type(3),
.slideshow:nth-of-type(4):checked ~ .slide:nth-of-type(4),
.slideshow:nth-of-type(5):checked ~ .slide:nth-of-type(5){

bottom: 0;
right: 0;
opacity:1;
}
	

	
	
.slideshow:nth-of-type(1):checked ~ .cadre-miniatures .miniatures:nth-of-type(1),
.slideshow:nth-of-type(2):checked ~ .cadre-miniatures .miniatures:nth-of-type(2),
.slideshow:nth-of-type(3):checked ~ .cadre-miniatures .miniatures:nth-of-type(3),
.slideshow:nth-of-type(4):checked ~ .cadre-miniatures .miniatures:nth-of-type(4),
.slideshow:nth-of-type(5):checked ~ .cadre-miniatures .miniatures:nth-of-type(5){
  
	opacity: 1;
}

	
.cadre-miniatures {
	

display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
left: 0; 
right: 0;
 
}
	
.miniatures {
background-color: #fafafa;	
aspect-ratio:1;
width:30px;
width: clamp(30px,4vw,60px);
border-radius: 50%;
z-index: 2;
cursor: pointer;
opacity: 0.35;
margin: 0 .5rem 0;
}

	@supports not (aspect-ratio:1)	{
		
		.miniatures{height:30px}	
		
	}
	
.miniatures:hover {
  opacity: 0.75;
}

.slide:nth-of-type(1),
.slider .cadre-miniatures .miniatures:nth-of-type(1) {
  background: url("image.jpg") no-repeat center/cover
}
.slide:nth-of-type(2),
.slider .cadre-miniatures .miniatures:nth-of-type(2) {
  background: url("image.jpg") no-repeat center/cover;

}
.slide:nth-of-type(3),
.slider .cadre-miniatures .miniatures:nth-of-type(3) {
  background: url("image.jpg") no-repeat center/cover;

}
.slide:nth-of-type(4),
.slider .cadre-miniatures .miniatures:nth-of-type(4) {
  background: url("image.jpg") no-repeat center/cover;

}
.slide:nth-of-type(5),
.slider .cadre-miniatures .miniatures:nth-of-type(5) {
  background: url("image.jpg") no-repeat center/cover;

}	

	



Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.