• Plein écran 3

    Pour simplifier le principe, le voici sur une seule image.

    Rappel: les barres d'onglets, d'adresses, d'outils s'affichent en haute de votre page; si vous voulez les escamoter ponctuellement, vous appuyez sur la touche de fonction F11 du haut de votre clavier.

    Vous revenez en configuration standard en cliquant de nouveau sur F11.

    Autre point: je sais que les unités viewport (vw et vh) gênent à la création des dimensions d'un élément; cependant, elles ont le gros avantage de tenir compte des dimensions de l'écran de lecture, contrairement au pixels, qui affichent une dimension, quelle que soit l'écran; l'élément déborde ou est petit mais ne s'adapte pas.

    Pour maîtriser ces unités, pensez que 1 vw = 1% de la largeur de votre écran; il est donc simple de le transcrire en pixel.

    Survolez l'image ci-dessous: la ville de Gap, préfecture des Hautes Alpes.

    Mes pages étant paramétrées pour centrer les textes et les images, le point de référence est donc le milieu de la largeur de ma page; pour que l'image agrandie s'affiche sur le bord gauche de la page, je dois annuler le centrage et faire un alignement à gauche (text-align:left;)

    Le point de référence étant l'angle haut/gauche de l'image, pour que celle-ci passe au dessus du texte qui la précède, je dois la faire remonter à l'agrandissement.

    Ces paramètres sont particuliers à ma page et à mon article et vous devrez les adapter à votre article.

    <p style="text-align: left;"><img id="pays1" src="http://ekladata.com/NjstDeNw3ysCU4eisdPysDDfiOs.jpg" alt="" /></p>

    <style><!--
    #pays1{width:32vw; height:18vw; margin:0 0 0 25vw; border:0.6vh ridge white; transition:all 1s linear;}
    #pays1:hover{position:absolute; z-index:5; width:100vw; height:56.25vw; transform:translate(-26vw,-11vw);}
    --></style>

    Mon image est positionnée à gauche par text-align:left;

    Si je veux qu'elle soit centrée dans mon article, je dois l'éloigner du bord gauche d'environ 25vw par margin:0 0 0 25vw;

    Cette position étant le point de référence à l'agrandissement, si je veux que mon image soit affichée à partir du bord gauche, il me faut compenser cet éloignement par transform:translate(-26vw,-11vw);

    Pourquoi -26vw et non 25vw: pour je ne sais trop quelle raison technique, -25vw laisse un petit écart à gauche, compensé par -1vw supplémentaire =>-26vw.

    Les lignes de texte au dessus de mon image font 11vw de haut, compensé également à l'agrandissement.

    En plaçant plusieurs images en position:absolute (indépendante), vous pouvez créer un agrandissement sur chaque image avec agrandissement identique pour chacune.

    Et pi c'est tout !