• Positionnement agrandissement

    Cette page pour une visiteuse qui a des difficultés à l'affichage de ses images agrandies au survol: ses agrandissements passent au dessus de la commande: "commentaires" de son blog et interdisent donc tout commentaire.
    La solution est de placer les images qui s'agrandissent dans un cadre défini qui lui, se positionnera dans l'article et laissera la page de blog accessible.
    Je ne peux reproduire exactement ce qui se passe sur sa page mais vous pouvez considérer que mes lignes sont la commande: "commentaires" et vous voyez qu'au survol de l'image, celle-ci passe au dessus du texte.
    Cette propriété peut être souhaitée dans certains cas mais il faut la maîtriser.

    Dans les exemples suivants, je vais placer ces images dans un cadre, sur lequel je mettrai une bordure, pour bien le matérialiser mais que vous supprimerez dans votre article.

    ***

    Code utilisé:
    <p><img id="x1" src="http://ekladata.com/DSCN5627.JPG" alt="" /></p>
    <style><!--
    #x1{ transition:all 1s linear; position:absolute; width:80px; height:60px;}
    #x1:hover{ position:absolute; z-index:2; width:800px; height:600px;}
    --></style>

    Cette image va s'agrandir dans son câdre et ne pas en sortir, ce qui permet d'écrire à coté, par exemple.

    Ainsi, vous déterminez dans quel espace votre image va s'agrandir et elle n'en sortira pas pour cacher autre chose.

    Code.
    <div style="width: 800px; height: 600px; border: 1px solid black; margin: 0 0 20px 50px; float: left;">
    <p><img id="x2" src="http://ekladata.com/...DSCN5632.JPG" alt="" /></p>
    </div>
    <style><!--
    #x2{ transition:all 1s linear;transform:translate(350px,0px); width:80px; height:60px;}
    #x2:hover{transform:translate(0px,0px); width:800px; height:600px;}
    --></style>

    En utilisant Google Chromium, sur Linux Ubuntu 14.04 lts, je m'aperçois qu'au survol d'une image, celle-ci s'affiche en grand au survol, automatiquement, ce qui fait double emploi avec l'animation.
    On peut annuler cette configuration mais dans ce cas, plus d'image apparente en prévisualisation... ?

    2 ème zone latérale

    L'agrandissement de l'image reste cantonné à son cadre et ne modifie rien autour.

    L'utilisation du code position:absolute anime l'élément en dehors de tout le reste; le code position:relative tient compte de l'environnement mais si vous avez fixé largeur et hauteur au cadre, valeurs qui ne bougent pas, vous pouvez placer vos éléments les uns sous les autres et chacun bougera indépendamment.

    Il faut au moins fixer la hauteur afin que ce qui est dessous ne soit pas recouvert.

    La valeur par défaut est position:relative;

    Code
    <p style="width: 290px; height: 590px; border: 1px solid black; text-align: center; font-size: 12pt; margin: 0 10px 0 0; padding: 5px; float: left;">En utilisant Google Chromium, ... ?</p>
    <p style="width: 450px; height: 600px; text-align: center; float: left;"><img id="x3" src="http://ekladata.com/5TwiHj_LbCJQRsL76gGkVYcnlzc/5681.jpg" alt="" /></p>
    <p style="width: 300px; height: 600px; border: 1px solid black; text-align: center; font-size: 12pt; margin: 0 0 0 10px; padding: 5px; float: left;">2 &egrave;me zone lat&eacute;rale</p>
    <style><!--
    #x3{ transition:all 1s linear;transform:translate(0px,0px); width:90px; height:120px;}
    #x3:hover{transform:translate(0px,0px); width:450px; height:600px;}
    --></style>
    ...