Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Lightbox/slideshow/slider

Diaporama (responsive) CSS effet de surbrillance

Code :

HTML


<div class=cadre-demo>
<div class=photos-mini>
<div class=miniature>
<input type="radio" name="demo" checked class="fen" id="lightbox-1">
<label for="lightbox-1"><img src="1.jpg" alt></label>
<div class="fenetre">
<img src="1.jpg" alt>
</div>
</div>
<div class=miniature>
<input type="radio" name="demo" class="fen" id="lightbox-2">
<label for="lightbox-2"><img src="2.jpg" alt></label>
<div class="fenetre">
<img src="2.jpg" alt>
</div>
</div>
<div class=miniature>
<input type="radio" name="demo" class="fen" id="lightbox-3">
<label for="lightbox-3"><img src="3.jpg" alt></label>
<div class="fenetre">
<img src="3.jpg" alt>
</div>
</div>
<div class=miniature>
<input type="radio" name="demo" class="fen" id="lightbox-4">
<label for="lightbox-4"><img src="4.jpg" alt></label>
<div class="fenetre">
<img src="4.jpg" alt>
</div>
</div>  
<div class=miniature>
<input type="radio" name="demo" class="fen" id="lightbox-5">
<label for="lightbox-5"><img src="5.jpg" alt></label>
<div class="fenetre">
<img src="5.jpg" alt>
</div>
</div>   
<div class=miniature>
<input type="radio" name="demo" class="fen" id="lightbox-6">
<label for="lightbox-6"><img src="6.jpg" alt></label>
<div class="fenetre">
<img src="6.jpg" alt>
</div>
</div>
</div>
</div>


CSS


*{box-sizing:border-box}

input[type=radio] {
	
position: absolute;
left:-9999px
	
}
	
img {max-width: 100%;}

.cadre-demo{
	
overflow: hidden;
position: relative;
max-width: 600px;
margin: 2rem auto
	
	}
    
.photos-mini{
	
	
padding-bottom: 66.67%;
display: flex;

	}
  
.miniature{
	
flex: 1;
padding: .25rem;

}
 

	
 label {
	 
display: flex;
cursor: pointer;
border: .25rem solid;
	
	}

	
.fenetre{

transition: .4s opacity;
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
opacity: 0
	
	}
	

	
.fen:checked ~label{
	
	opacity: .6
	
	}
	
	
.fen:checked~.fenetre{
	
	opacity: 1
	
	}
    
.fenetre:before{ 

content: '';  
width: 0;
height: 100vh;
position: absolute;
top: 0;
left: -100%;
filter: blur(30px);
background: hsla(0, 0%, 100%, 0.6);
transform: skewX(-20deg)
	
	}
	
.fen:checked ~.fenetre:before{

left: 200%;
width: calc(100vw/10);
transition: all 2s 
	
	}
	

Support navigateurs :

CSS transforms 2d

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

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.