• Lavande 2


    <div style="width: 83vw; height: 92vh; border: 0.3vh ridge white; background: rgba(0,0,0,0.5); margin: 2vh auto; overflow: hidden;"><input id="lav0" class="lav" type="text" /><input id="lav1" class="lav" type="text" /><input id="lav2" class="lav" type="text" /><input id="lav3" class="lav" type="text" /><input id="lav4" class="lav" type="text" /><input id="lav5" class="lav" type="text" />
    <p id="fleur">
    <img style="width: 80vw;" src="http://ekladata.com/hXs3z_W_OjHh4RZxHz50g0zt20Q.jpg" alt="" />
    <img style="width: 80vw;" src="http://ekladata.com/uh-OlMLpvn6PzerGfu_pIbdn1Zg.jpg" alt="" />
    <img style="width: 80vw;" src="http://ekladata.com/97y3jhVZehNFGPRtj5pG7NBodd4.jpg" alt="" />
    <img style="width: 80vw;" src="http://ekladata.com/a0cJKI1O9rtHm0quBi6JBS3bjNk.jpg" alt="" />
    <img style="width: 80vw;" src="http://ekladata.com/NB6sSZ9sPgUMDrHGFgmX0bWHRSs.jpg" alt="" />
    <img style="width: 80vw;" src="http://ekladata.com/O7L4R_jEFUkjKUti6zGAmcKdu4E.jpg" alt="" /></p>
    </div>
    <style><!--
    .lav{position:absolute; width:1.5vw; height:1.5vw; border-radius:50%; background:white;}
    #lav0{transform:translate(80.5vw,5vh);}
    #lav1{transform:translate(80.5vw,10vh);}
    #lav2{transform:translate(80.5vw,15vh);}
    #lav3{transform:translate(80.5vw,20vh);}
    #lav4{transform:translate(80.5vw,25vh);}
    #lav5{transform:translate(80.5vw,30vh);}
    #fleur{dispaly:inline; width:80vw; height:552vh; transform:translate(0vw,0vh); transition:all 1s linear;}
    .lav:focus{background:lime;}
    #lav1:focus ~ #fleur{transform:translate(0vw,-92vh);}
    #lav2:focus ~ #fleur{transform:translate(0vw,-184vh);}
    #lav3:focus ~ #fleur{transform:translate(0vw,-276vh);}
    #lav4:focus ~ #fleur{transform:translate(0vw,-368vh);}
    #lav5:focus ~ #fleur{transform:translate(0vw,-460vh);}
    --></style>


    Mes photos sont hébergées en 1920x1080px, redimensionnées en mesures adaptatives: 80vw/92vh.

    Pour une présentation en verticale, le paragraphe contenant les images doit avoir la largeur d'une image et la hauteur selon le nombre d'images contenues, ici 6 soit 6x92vh=552vh

    Chaque clic sur un bouton fait remonter ce paragraphe d'une hauteur d'image.