• Album photos E

    Essai d'une écriture différente pour un affichage des images agrandies en plein écran.
    Clic maintenu sur chaque vignette.
    La commande peut être paramétrée au survol mais je trouve ça un peu rock and roll.
    Rappel: en déplaçant votre curseur agrandie, vous la faite rester fixe; un clic dessus la réduit.

    Les paragraphes précédents votre album photos.
    Sa hauteur est ici de 5vw (5% de la largeur de votre écran) mais sa dimension n'influe pas sur le positionnement  des images agrandies.
    L'album photos est centré dans la page en largeur.

    La suite de votre article avec ses rubriques.
    L'exemple comporte 12 images au ratio 16/9 horizontales aux dimensions de 8vw par 4.5vw avec une bordure de 0.4vh blanche, intégrée dans les dimensions hors tout.
    La transition est rapide mais sa vitesse est réglable.

    vad vad vad vad vad vad vad vad vad vad vad vad

    <p style="height: 5vw; background: aqua;">Paragraphe 1</p>
    <p style="height: 5vw; background: pink;">Paragraphe 2</p>
    <p style="text-align: left; width: 60vw; height: 10vw; margin: 1vh auto;"><img id="vad1" class="vad" src="http://ekladata.com/CvuMQVqBODzUdrkq4lJAnqNqWnc.jpg" alt="vad" /> <img id="vad2" class="vad" src="http://ekladata.com/x_MW-T1AwIzGQo_67MEbh2lELXo.jpg" alt="vad" /> <img id="vad3" class="vad" src="http://ekladata.com/4CbNjhPtsJOlaxtFB6VJTY5GdAo.jpg" alt="vad" /> <img id="vad4" class="vad" src="http://ekladata.com/qHtQ1fy7hh6YmdGu8EN0TZfEPhs.jpg" alt="vad" /> <img id="vad5" class="vad" src="http://ekladata.com/Hyj9YpaBrE1Y1RIKLjuI1Eq9c3s.jpg" alt="vad" /> <img id="vad6" class="vad" src="http://ekladata.com/kwFNzthlPOcga4bQcBu_pSZEY6Y.jpg" alt="vad" /> <img id="vad7" class="vad" src="http://ekladata.com/9Enm2coTrATwD9oI9hO6Hw4cZyw.jpg" alt="vad" /> <img id="vad8" class="vad" src="http://ekladata.com/OiuHh6Vka8l9IS8iiUx6h0zbNJs.jpg" alt="vad" /> <img id="vad9" class="vad" src="http://ekladata.com/ZuJUq3SboFiFn6WoXltZylX0s5s.jpg" alt="vad" /> <img id="vad10" class="vad" src="http://ekladata.com/2eiAnHGXx7diNDY4zR2un9ncDe0.jpg" alt="vad" /> <img id="vad11" class="vad" src="http://ekladata.com/4YyDM5cvD8DbZT-JQLnGG6XlC5o.jpg" alt="vad" /> <img id="vad12" class="vad" src="http://ekladata.com/gPB7ijF4_OJtN0OCRcLyfI_S_c4.jpg" alt="vad" /></p>

    <style><!--
    .vad{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.4vh solid white;}
    #vad1{box-sizing:border-box; transform:translate(1vw,0vw);}
    #vad2{box-sizing:border-box; transform:translate(10vw,0vw);}
    #vad3{box-sizing:border-box; transform:translate(19vw,0vw);}
    #vad4{box-sizing:border-box; transform:translate(28vw,0vw);}
    #vad5{box-sizing:border-box; transform:translate(37vw,0vw);}
    #vad6{box-sizing:border-box; transform:translate(46vw,0vw);}
    #vad7{box-sizing:border-box; transform:translate(1vw,5vw);}
    #vad8{box-sizing:border-box; transform:translate(10vw,5vw);}
    #vad9{box-sizing:border-box; transform:translate(19vw,5vw);}
    #vad10{box-sizing:border-box; transform:translate(28vw,5vw);}
    #vad11{box-sizing:border-box; transform:translate(37vw,5vw);}
    #vad12{box-sizing:border-box; transform:translate(46vw,5vw);}
    #vad1:active{position:absolute; z-index:5;width:100vw; height:56.25vw; top:15vw; left:-1vw;}
    #vad2:active{position:absolute; z-index:5;width:100vw; height:56.25vw; top:15vw; left:-10vw;}
    #vad3:active{position:absolute; z-index:5;width:100vw; height:56.25vw; top:15vw; left:-19vw;}
    #vad4:active{position:absolute; z-index:5;width:100vw; height:56.25vw; top:15vw; left:-28vw;}
    #vad5:active{position:absolute; z-index:5;width:100vw; height:56.25vw; top:15vw; left:-37vw;}
    #vad6:active{position:absolute; z-index:5;width:100vw; height:56.25vw; top:15vw; left:-46vw;}
    #vad7:active{position:absolute; z-index:5;width:100vw; height:56.25vw; top:10vw; left:-1vw;}
    #vad8:active{position:absolute; z-index:5;width:100vw; height:56.25vw; top:10vw; left:-10vw;}
    #vad9:active{position:absolute; z-index:5;width:100vw; height:56.25vw; top:10vw; left:-19vw;}
    #vad10:active{position:absolute; z-index:5;width:100vw; height:56.25vw; top:10vw; left:-28vw;}
    #vad11:active{position:absolute; z-index:5;width:100vw; height:56.25vw; top:10vw; left:-37vw;}
    #vad12:active{position:absolute; z-index:5;width:100vw; height:56.25vw; top:10vw; left:-46vw;}
    --></style>

    Quelques mots sur les valeurs.

    Chaque vignette est positionnée par transform:translate(X,Y) car cet attribut se réfère à son bloc contenant.

    A l'agrandissement, les images sont positionnées par top:x; et left:Y; car ces attribut se réfère à l'écran.

    Mon bandeau occupant une partie de la hauteur (env 15vw), la position en hauteur des images agrandies de la ligne supérieure  est en dessous de 15vw.

    Les images agrandies de la ligne inférieure est en dessous de 10vw, pour compenser leur position dans la page.

    En largeur, j'ai dû positionner la première image agrandies en -1vw afin qu'elle soit légèrement décalée vers la gauche (réglage interne ?)

    Les autres se déplaçant d'autant, en fonction de leur position dans la page.

    Mon exemple est centré dans ma page par margin:1vh auto;  cet attribut permet le centrage du montage dans votre zone article.

    Si vous souhaitez que le montage soit collé au côté gauche, supprimez-le.