• Photos verticales au clic

    Pour présenter des images verticales seules, et afin de pouvoir le faire sur des écrans de petite taille, on peut les commander par un bouton.

    Cette première version est au clic, la seconde, très similaire, sera au survol.



    Clic sur chaque bouton pour afficher une nouvelle image.

    L'animation est celle de votre choix, le nombre d'images/boutons également.

    Dans cet exemple; chaque image est en vertical et au ratio 16/9.

     

     

     

     

     

     

     


    <div style="width: 25.3vw; height: 45vw; margin: 2vh auto; border: 0.2vh solid white; background: linear-gradient(to bottom, rgba(50,100,150,0.9) 0%, rgba(50,100,150,0.5) 100%);"><input id="ong1" class="ong" type="text" value="A" /><input id="ong2" class="ong" type="text" value="B" /><input id="ong3" class="ong" type="text" value="C" /><input id="ong4" class="ong" type="text" value="D" /><input id="ong5" class="ong" type="text" value="E" /><input id="ong6" class="ong" type="text" value="F" /><input id="ong7" class="ong" type="text" value="G" />
    <p id="gh0"><br /><br />Clic sur chaque bouton pour afficher une nouvelle image.<br /><br />L'animation est celle de votre choix, le nombre d'images/boutons &eacute;galement.<br /><br />Dans cet exemple; chaque image est en vertical et au ratio 16/9.</p>
    <p id="gh1" class="gh">&nbsp;</p>
    <p id="gh2" class="gh">&nbsp;</p>
    <p id="gh3" class="gh">&nbsp;</p>
    <p id="gh4" class="gh">&nbsp;</p>
    <p id="gh5" class="gh">&nbsp;</p>
    <p id="gh6" class="gh">&nbsp;</p>
    <p id="gh7" class="gh">&nbsp;</p>
    </div>
    <style><!--
    .ong{position:absolute; z-index:15; width:1vw; height:2vw; border:0.1vh solid black; box-shadow:inset -0.2vh -0.2vh 0.2vh black;text-align:center; line-height:2vw; font-size:1vw;}
    #ong1{transform:translate(24vw,0vw);}
    #ong2{transform:translate(24vw,2vw);}
    #ong3{transform:translate(24vw,4vw);}
    #ong4{transform:translate(24vw,6vw);}
    #ong5{transform:translate(24vw,8vw);}
    #ong6{transform:translate(24vw,10vw);}
    #ong7{transform:translate(24vw,12vw);}
    #gh0{position:absolute; z-index:1; width:23vw; height:45vw; text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black;}
    .gh{position:absolute; z-index:2; width:25.3vw; height:45vw; transition:transform 1s linear;}
    #gh1{background:url('http://ekladata.com/Gk1gFjbVCuK0tXXlUUqvtYaIzjo.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
    #gh2{background:url('http://ekladata.com/AFKxX8dbN2Qizc7nz_lkUP_7ERE.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
    #gh3{background:url('http://ekladata.com/VBxQ9CkOC_rsxDJNind4jtk8c9I.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
    #gh4{background:url('http://ekladata.com/iZmkakf9R5Jd-_JW4Cj7CvwXY2Y.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
    #gh5{background:url('http://ekladata.com/dnDAf7cjCl_-ZowPL9A2FgqYKFk.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
    #gh6{background:url('http://ekladata.com/DtFKNLjdrhW_KV5J0swg9_68Zr0.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
    #gh7{background:url('http://ekladata.com/NfOy4fW8O2qGj7JPRTOdT4xxya4.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
    #ong1:focus ~ #gh1,#ong2:focus ~ #gh2,#ong3:focus ~ #gh3,#ong4:focus ~ #gh4,#ong5:focus ~ #gh5,#ong6:focus ~ #gh6,#ong7:focus ~ #gh7{z-index:10; transform:translate(0vw,0vw) rotatey(0deg);}
    --></style>