• Automne 1

    Quelques images en vertical, pas toujours facile à placer dans les montages; en ne mettant que des images verticales, c'est plus simple !

    L'écriture du code est assez simple puisqu'on place les adresses des images, les unes à côté des autres, sans espace entre chaque, dans un paragraphe suffisamment large, que l'on fait glisser par le survol de chaque bouton, derrière la fenêtre, aux dimensions d'une image.

    Afin de réduire le poids du montage, j'ai réduit la taille des images de 1080x1920px (885ko) à 475x845px (200ko) par the Gimp, pour moi.

    Le code est en unités adaptatives (vw) et représente à peu près 80% de la hauteur de votre écran.

    Survolez chaque bouton.

    A

    B

    C

    D

    E

    <div id="vtc">
    <p id="bc2" class="bc">A</p>
    <p id="bc3" class="bc">B</p>
    <p id="bc4" class="bc">C</p>
    <p id="bc5" class="bc">D</p>
    <p id="bc6" class="bc">E</p>
    <p id="bc1"><img style="width: 25vw;" src="http://ekladata.com/WDax2MLNVJP3JIcY59XLNpv9vBk.jpg" alt="" /><img style="width: 25vw;" src="http://ekladata.com/M2E6mNEDBfB5Tte58ph2_Vq6D0g.jpg" alt="" /><img style="width: 25vw;" src="http://ekladata.com/CNsmy6e5tyiphKuQnEQMYTiJykE.jpg" alt="" /><img style="width: 25vw;" src="http://ekladata.com/qfEimNTQScuRcNO5qePH_rZibyU.jpg" alt="" /><img style="width: 25vw;" src="http://ekladata.com/Y3dkELzQohvcIGvZxijNAbK4tXo.jpg" alt="" /><img style="width: 25vw;" src="http://ekladata.com/77n855P0NafutMoFBdyj21OmfV4.jpg" alt="" /></p>
    </div>

    <style><!--
    #vtc{position: relative; width: 25vw; height: 44vw; margin: 2vh auto; border: 0.4vh ridge white; border:right:1vw solid rgba(0,0,0,0.7); overflow: hidden;}
    .bc{position:absolute; z-index:2; box-sizing:border-box; width:1vw; height:2vw; border:0.2vh solid grey; background:linear-gradient(to bottom, green 0%,yellow 100%); text-align:center; line-height:2vw; font-size:1vw;}
    #bc2{transform:translate(24vw,0vw);}
    #bc3{transform:translate(24vw,2vw);}
    #bc4{transform:translate(24vw,4vw);}
    #bc5{transform:translate(24vw,6vw);}
    #bc6{transform:translate(24vw,8vw);}
    #bc1{position:absolute; z-index:1; width:151vw; height:44vw; transform:translate(0vw,0vw); transition:all 1s linear;}
    #bc2:hover ~ #bc1{transform:translate(-25vw,0vw);}
    #bc3:hover ~ #bc1{transform:translate(-50vw,0vw);}
    #bc4:hover ~ #bc1{transform:translate(-75vw,0vw);}
    #bc5:hover ~ #bc1{transform:translate(-100vw,0vw);}
    #bc6:hover ~ #bc1{transform:translate(-125vw,0vw);}
    --></style>