-
A la page
Version en 60vw par 69vh d'un article publié.
Cliquez sur chaque bouton
pour changer
les images
et survolez
chacune.
<div style="width: 60vw; height: 69vh; margin: 2vh auto; border: 0.3vh ridge white; background: url('http://ekladata.com/-cCYN6TIL5JfkemWx0pWAzsBgko.jpg'); background-size: 80vw 92vh; text-align:left;"><input id="btlesp1" class="btlesp" type="text" /><input id="btlesp2" class="btlesp" type="text" /><input id="btlesp3" class="btlesp" type="text" />
<p id="lesp1"> </p>
<p id="lesp2"> </p>
<p id="lesp3"> </p>
<p id="lesp4"> </p>
<p id="lesp5"> </p>
<p id="lesp6"> </p>
<p id="surv">Cliquez sur chaque bouton<br />pour changer<br /> les images<br />et survolez <br />chacune.</p>
</div>
<style><!--
.btlesp{position:absolute; z-index:10;width:1.5vw; height:1.5vw; border:0.6vh solid brown; background:transparent;}
#btlesp1{transform:translate(25vw,2vh);}
#btlesp2{transform:translate(30vw,2vh);}
#btlesp3{transform:translate(35vw,2vh);}
#surv{position:absolute; z-index:1; width:40vw; text-align:center; font-size:5vh; color:white; text-shadow:0.2vh 0.2vh black; transform:translate(10vw,5vh);}#lesp1{position:absolute; z-index:1; width:60vw; height:69vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/jB-CV8b5xFAd2nkKTkwFN420f_I.jpg'); background-size:60vw 69vh; transform-origin:center left; transform:translate(3vw,0vh) perspective(10vw) rotatey(20deg); transition:all 1s linear; display:none;}
#lesp2{position:absolute; z-index:1; width:60vw; height:69vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/juFMXrdOkN1HaT-LheBmq2Dp7Pw.jpg'); background-size:60vw 69vh;transform-origin:center right; transform:translate(-3vw,0vh) perspective(10vw) rotatey(-20deg); transition:all 1s linear; display:none;}
#lesp3{position:absolute; z-index:2; width:60vw; height:69vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/37_hYXjvVrhb82RJ2wuChPFzPcU.jpg'); background-size:60vw 69vh; transform-origin:center left; transform:translate(3vw,0vh) perspective(10vw) rotatey(20deg); transition:all 1s linear; display:none;}
#lesp4{position:absolute; z-index:2; width:60vw; height:69vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/lBJrWKCJcEihZnuXvv2l8B9gsgE.jpg'); background-size:60vw 69vh;transform-origin:center right; transform:translate(-3vw,0vh) perspective(10vw) rotatey(-20deg); transition:all 1s linear; display:none;}
#lesp5{position:absolute; z-index:2; width:60vw; height:69vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/ZHk6G2jyLkKFoOlLNKan2SFpQiA.jpg'); background-size:60vw 69vh; transform-origin:center left; transform:translate(3vw,0vh) perspective(10vw) rotatey(20deg); transition:all 1s linear; display:none;}
#lesp6{position:absolute; z-index:2; width:60vw; height:69vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/u5Q9Tkxv1xBoTbRaBgA4Ie1rpE4.jpg'); background-size:60vw 69vh;transform-origin:center right; transform:translate(-3vw,0vh) perspective(10vw) rotatey(-20deg); transition:all 1s linear; display:none;}#lesp1:hover,#lesp2:hover,#lesp3:hover,#lesp4:hover,#lesp5:hover,#lesp6:hover{z-index:10; width:60vw; height:69vh; background-size:60vw 69vh; transform:translate(0vw,0vh);}
#btlesp1:focus ~ #lesp1,#btlesp1:focus ~ #lesp2,#btlesp2:focus ~ #lesp3,#btlesp2:focus ~ #lesp4,#btlesp3:focus ~ #lesp5,#btlesp3:focus ~ #lesp6{display:block;}
--></style>
La taille de vos images est indifférente; vous pouvez en ajouter ou en retirer.