• Agrandissement en %

    Lorsque nous plaçons une image dans un cadre et que nous donnons une animation d'agrandissement à ce cadre (au survol, dans cet exemple), si nous avons fixé des dimensions à l'image en pixels, le cadre s'agrandira mais l'image restera à sa taille d'origine.

    Nous pouvons la dimensionner en % du cadre et ainsi, si le cadre s'agrandit, le % de l'image grandira et elle suivra l'agrandissement du cadre.

    Vous trouverez un article, à partir du 4 décembreICI.
    Survolez ce cadre.

    votre texte

     

    Le code:
    <div id="mont4"><img style="float: left; padding-right: 5px; width: 80%; height: auto;" src="http://ekladata.com/K_rrw7qGp0YQxsDWGXdfrC9SClk.jpg" alt="" />
    <p style="margin: 30px 0 0 0; font-size: 12pt; padding: 5px;">votre texte</p>
    </div>

    <style type="text/css"><!--
    #mont4 { position:absolute; transform:translate(700px,0px);transition:all 1s linear; width:100px; height:200px; border:1px solid black; box-shadow:3px 3px grey; background:#DEB887; overflow: hidden;}
    #mont4:hover{ z-index:5; width:800px; height:600px; transform:translate(400px,0px);}
    --></style>

    Remarquez la largeur de l'image qui est de width:80%, soit 80% de la largeur du cadre de 100px = 80px et la hauteur est en mode auto, de façon à suivre la largeur dans son animation.

    Lorsque le cadre va passer de 100px de large à 800px de large, la largeur de l'image va passer de 80% de 100px à 80% de 800px, la hauteur suit automatiquement; elle conserve le rapport avec le cadre.
    Vous pouvez modifier cette valeur et en voir le résultat.