• Positionnement 2

    Voyons le positionnement des images agrandies par transform:translate(Hvw,Vvw);

    Nous avons vu que le point de référence de l'image agrandie est l'angle haut/gauche du cadre du montage; or, selon la structure de notre blog (colonne latérale droite, colonne latérale gauche ou les deux) ainsi que la largeur de votre page, qui peut remplir la totalité de la largeur de l'écran ou seulement une partie, notre zone article sera positionnée de différentes façons et l'angle haut/gauche du montage sera plus ou moins éloigné du bord gauche de votre écran.

    A l'agrandissement, nous allons devoir rattraper ces différents décalages.

    Bandeau

    Rubrique gauche

    Zone article
    Montage

    A

    Rubrique droite

    Comme vous le voyez, le point de référence des éléments du montage est en A; si vous voulez faire apparaître une image en plein écran, c'est à dire commençant au bord gauche de votre écran et allant jusqu'au bord droit, il va falloir déterminer la position du point A pour rattraper le bord gauche.

    Je ne vois pas d'autre solution que de faire des essais car chaque blog est différent.

    Il faut rattraper le positionnement du montage dans la zone article,

    la largeur de la rubrique gauche,

    et la distance éventuelle entre votre page de blog et le bord gauche de votre écran.

    Prenons un exemple avec trois images, à survoler, dans un montage en 60vw de large.

    En hauteur, les images vont s'aligner sur le bord haut du montage (ce que nous pouvons modifier); nous allons lui indiquer leur positionnement par rapport au point A.qui est le même pour les 3.

    <div style="width: 60vw; height: 10vw; border: 0.1vh solid black; text-align: left; margin: 1vh auto;"><img id="exp1" src="http://ekladata.com/XHPr-eHw7wJUSE81tg55nRaG77o.jpg" alt="" /> <img id="exp2" src="http://ekladata.com/iTAE7ap1Z6zCzc1bHbf4KHEFcxM.jpg" alt="" /> <img id="exp3" src="http://ekladata.com/31bCNn-iF6VnpgZ8oY5cwB88gHM.jpg" alt="" /></div>

    <style><!--
    #exp1{position:absolute; z-index:1; width:16vw; height:9vw; border:0.4vh solid white; border-radius:3vw; box-shadow:0.4vh 0.4vh 0.6vh black; transform:translate(2vw,0vw);transition:all 1s linear;}
    #exp2{position:absolute; z-index:1; width:16vw; height:9vw; border:0.4vh solid white; border-radius:3vw; box-shadow:0.4vh 0.4vh 0.6vh black; transform:translate(20vw,0vw);transition:all 1s linear;}
    #exp3{position:absolute; z-index:1; width:16vw; height:9vw; border:0.4vh solid white; border-radius:3vw; box-shadow:0.4vh 0.4vh 0.6vh black; transform:translate(40vw,0vw);transition:all 1s linear;}
    #exp1:hover,#exp2:hover,#exp3:hover{z-index:100; width:100vw; height:56.25vw; border-radius:0vw; transform:translate(-16vw,-13vw);}


    --></style>