• 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">&nbsp;</p>
    <p id="lesp2">&nbsp;</p>
    <p id="lesp3">&nbsp;</p>
    <p id="lesp4">&nbsp;</p>
    <p id="lesp5">&nbsp;</p>
    <p id="lesp6">&nbsp;</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.