• Positionnement CSS3

    Un ajout au sujet des "position relative et absolute":
    La positiohn relative est la position par défaut et, lorsque vous placez un élément (texte, image ...) il tient compte de ce qu'il y a déjà dans l'article et se place souvent dessous.
    En position absolute, il se considère seule au monde et se place où vous l'avez décidé par son positionnement et parfois au dessus de zone que l'on voudrait laisser accessibles.
    La solution, comme développé ci-dessous, est de bloquer cet élément dans une boïte, dont les limites seront son champ de mouvement, ce qui l'empêchera d'aller se placer sur d'autres éléments.


    1/Positionner un élément (id="essai" ; ce rectangle peut représenter une vignette), dans le cadre de votre montage.
    La position de départ est: transform:translate(0px,0px), c'est à dire en haut à gauche
    Pour la modifier dans l'exemple, écrivez par exemple, dans la case: translate(100px,100px) et cliquez sur le bouton.

     

    code

    <div style="width: 400px; height: 360px; border: 1px solid black; overflow: hidden; margin: 0 0 0 150px; float: left;">
    <div id="essai">&nbsp;</div>
    </div>
    <style type="text/css"><!--
    #essai{ transform:translate(0px,0px);
    background-color:#cc0000; width:80px; height:60px;}
    --></style>

    Dans cet exemple, je rends invisible ce qui sort du cadre ainsi, si vous écrivez: translate(500px,0px) le rectangle sort du montage.
    J'ai choisi des dimensions d'un rapport 4/3 , à adapter pour images de 800x600px.

     

     


     

    code
    Nous savons positionner notre vignette (essai) où nous le voulons mais comme nous allons l'agrandir au survol, nous allons lui imposer où se positionner étant grande;
    la vitesse de transition sera de 2 secondes: transition:all 2s linear;
    <div style="width: 400px; height: 300px; border: 1px solid black; overflow: hidden; margin: 0 0 0 150px; float: left;">
    <div id="essai1">&nbsp;</div>
    </div>
    <style type="text/css"><!--
    #essai1{ transition:all 2s linear; transform:translate(0px,240px);
    background-color:#cc0000; width:80px; height:60px;}
    #essai1:hover{transform:translate(0px,0px); width:400px; height:300px;}
    --></style>

     


     
     

    code
    Nous allons ajouter une deuxième vignette et c'est là que ça se complique car la seconde se met, par défaut, sous la première, dans ce cas de figure.
    Nous allons donc les rendre inépendantes l'une de l'autre par l'attribut: position:absolute, sur chacune d'elles.
    <div style="width: 400px; height: 300px; border: 1px solid black; overflow: hidden; margin: 0 0 0 150px; float: left;">
    <div id="essai2">&nbsp;</div>
    <div id="essai3">&nbsp;</div>
    </div>
    <style type="text/css"><!--
    #essai2{ position:absolute;transition:all 2s linear; transform:translate(0px,240px);
    background-color:#cc0000; width:80px; height:60px;}
    #essai2:hover{transform:translate(0px,0px); width:400px; height:300px;}
    #essai3{ position:absolute;transition:all 2s linear; transform:translate(90px,240px);
    background-color:#cccc00; width:80px; height:60px;}
    #essai3:hover{transform:translate(0px,0px); width:400px; height:300px;}
    --></style>
    Nous les plaçons l'une à côté l'autre, par translate()  mais nous voyons qu'au survol de la première, elle s'agrandit sous la seconde, puisqu'elle est écrite en premier.
    Nous allons ajouter un attribut supplémentaire qui va positionner chaque vignette en profondeur, ce qui va nous permettre d'agrandit chaque vignette au dessus des autres: z-index:2; plus le chiffre est élevé, plus l'élément est au premier plan.

     


     
     

    code
    Au survol de chaque vignette, elle passe sur les autres, en s'agrandissant.
    <div style="width: 400px; height: 300px; border: 1px solid black; overflow: hidden; margin: 0 0 0 150px; float: left;">
    <div id="essai4">&nbsp;</div>
    <div id="essai5">&nbsp;</div>
    </div>
    <style type="text/css"><!--
    #essai4{ position:absolute;transition:all 2s linear; transform:translate(0px,240px);
    background-color:#cc0000; width:80px; height:60px;}
    #essai4:hover{z-index:2; transform:translate(0px,0px); width:400px; height:300px;}
    #essai5{ position:absolute;transition:all 2s linear; transform:translate(90px,240px);
    background-color:#cccc00; width:80px; height:60px;}
    #essai5:hover{z-index:2;transform:translate(0px,0px); width:400px; height:300px;}
    --></style>
    Nous avons les bases de notre montage.

     


     
     
     

    code
    <div style="width: 400px; height: 300px; border: 1px solid black; overflow: hidden; margin: 0 0 0 150px; float: left;">
    <div id="essai6">&nbsp;</div>
    <div id="essai7">&nbsp;</div>
    <div id="essai8">&nbsp;</div>
    </div>
    <style type="text/css"><!--
    #essai6{ position:absolute;transition:all 2s linear; transform:translate(0px,240px);
    background-color:#cc0000; width:80px; height:60px;}
    #essai6:hover{z-index:2; transform:translate(0px,0px); width:400px; height:300px;}
    #essai7{ position:absolute;transition:all 2s linear; transform:translate(90px,240px);
    background-color:#cccc00; width:80px; height:60px;}
    #essai7:hover{z-index:2;transform:translate(0px,0px); width:400px; height:300px;}
    #essai8{ position:absolute;transition:all 2s linear; transform:translate(200px,50px);
    background-color:#ff00ff; width:80px; height:60px;}
    #essai8:hover{z-index:2;transform:translate(0px,0px); width:400px; height:300px;}
    --></style>
    Comme vous le voyez, les lignes au survol sont les mêmes pour chaque vignette, puisqu'elles s'agrandissent de la même façon, vers la même position.
    *****
    Vous avez les éléments pour construire votre montage selon votre goût.