• Article en % 2

    Nous avons vu comment remplir un paragraphe, aux dimensions adaptatives, avec une image afin que l'affichage s'adapte à la résolution de l'écran de lecture.

    Nous pouvons souhaiter donner une animation à cette image ou ce paragraphe; si nous voulons, par exemple, agrandir cette image au survol, il faudra se souvenir que le point de référence de l'agrandissement est, par défaut, l'angle haut/gauche du paragraphe ou de l'image.

    Si nous avons centré notre paragraphe dans notre page, agrandir à partir de l'angle haut/gauche va le déplacer vers la droite et le bas, ce qui n'est pas toujours souhaité.

    Nous aurons donc 2 solutions (au moins) pour que le paragraphe agrandi reste centré dans la page:

    - le faire se déplacer vers la gauche en même temps qu'il change de taille.

    - changer le point de référence pour que l'agrandissement agisse à partir du centre du paragraphe ou d'un tout autre point.

    Repartons avec un paragraphe de largeur 50%, centré dans la page; pour cela, nous allons lui dire de se tenir à 0% du haut, 0% du bord droit, 0% du bas et à 25% du bord gauche (à ajuster selon les marges de votre blog).

    <p style="width: 50%; margin: 0 0 0 22%;"><img style="width: 100%;" src="http://ekladata.com/vm_bun30Y0bz8kF8I5NabyhKXOU.jpg" alt="" /></p>

    Si nous voulons agrandir ce paragraphe contenant notre image, nous n'avons qu'à modifier au survol, sa largeur pour la passer de 50% à 70%, par exemple

    Sans déplacer le paragraphe, voyez le résultat au survol ci-dessus.

    Afin que notre paragraphe reste centré, nous allons le faire se déplacer vers la droite, dans notre exemple, de -10% par rapport 22%, avec le même agrandissement.

    <p id="x2"><img style="width: 100%;" src="http://ekladata.com/JAHgO7b9gfyLp3UQq9OB7788YYE.jpg" alt="" /></p>
    <style><!--
    #x2{width: 50%; margin: 0 0 0 22%; transition:all 1s linear;}
    #x2:hover{width:70%; margin: 0 0 0 12%;}
    --></style>

    L'image remplit toujours le paragraphe à 100% mais la taille du paragraphe passe de 50% à 70% et sa position de margin:0 0 0 22%; à margin:0 0 0 12%; ce qui correspond à une translation vers la droite de -10%.

    Dans ces exemples, l'agrandissement d'un paragraphe pousse les autres mais c'est un autre sujet !

    Voyons le résultat en modifiant le point de référence de l'agrandissement: nous allons le définir au centre du paragraphe et appliquer la même animation au survol.

     

    L'écriture est différente car nous laissons le paragraphe sans largeur définie et donc être de la largeur de la page; nous lui indiquons de centrer son contenu ce qui affiche notre image centrée dans le paragraphe et donc dans la page.

    Dans ce cas, la largeur de notre image est définie à 50% de la largeur de la page, que nous faisons passer à 70% au survol.

    Afin qu'elle reste centrée, nous indiquons de faire cet agrandissement à partir de son centre  et non à partir son angle haut/gauche.

    <p style="text-align: center;"><img id="x3" src="http://ekladata.com/42we0fA2Fq3VihiA1HU3jmQF9N8.jpg" alt="" /></p>

    <style><!--
    #x3{width: 50%; transform-origin:center center; transition:all 1s linear;}
    #x3:hover{width:70%;}
    --></style>

    Le résultat étant similaire, je vous laisse adopter l'écriture qui vous convient !

    Nous pouvons également modifier la taille d'un élément en modifiant son échelle (scale) mais ... "ceci est une autre histoire !" (R Kipling)