• cacher bouton.

    Dans mes derniers codes montages, vous trouvez des carrés blanc à survoler, qui commandent l'agrandissement d'une image et qui disparaissent lorsque l'image est agrandie.

    Le principe est de placer, dans un cadre à la dimension choisie:

    - en fond (z-index:1;), l'élément carré blanc, positionné où vous le voulez;

    - au dessus (z-index:2;), l'image réduite.

    -au premier plan (z-index:3;), une zone réactive, positionnée au dessus de l'emplacement du bouton, et qui commandera, au survol, l'agrandissement de l'image.

    Un code exemple:

    <div style="width:60vw; height:69vh; margin:2vh auto;">

    <p id="inv">&nbsp;</p>
    <p id="bt">&nbsp;</p>
    <p id="mg">&nbsp;</p>

    </div>
    <style><!--
    #bt{position:absolute; z-index:1; width:3vw; height:3vw; border:0.5vh solid green; transform:translate(55vw,5vh);}
    #mg{position:absolute; z-index:2; width:20vw; height:23vh; background:url('http://ekladata.com/jkxUsnrgKLRfQiGmiG7Ct5vHMpA.jpg'); backgound-size:cover; transition:all 1s linear;}
    #inv{position:absolute; z-index:3; width:4vw; height:4vw; transform:translate(55vw,5vh);}
    #inv:hover ~ #mg{width:60vw; height:69vh; transform:translate(0vw,0vh);}
    -->/style>

     

     

     


    Le montage fait 60vw par 69vh, centré dans la page et sans bordure.

    Remarquez la position de la ligne inv: l'élément survolé doit toujours se trouver écrit en premier, dans les lignes de codes, ce qui n'empêche pas de le positionner où on le souhaite, dans la page.

    Règle générale: élément survolé/élément animé.

    Inv est positionné en premier plan (z-index:3;), le bouton visible, en arrière plan (z-index:1;) pour être caché par l'agrandissement de l'image (z-index:2;).

    L'image vient s'agrandir entre les deux (z-index:2;) de façon à laisser le bouton invisible (inv) actif et de cacher le bouton visible (bt).

    Ceci vous permet de placer plusieurs boutons, qui commandent plusieurs images et qui sont cachés lorsque les images sont agrandies.

    Le fait de commander l'animation d'un élément par le survol d'un bouton, et non par un survol direct, permet d'animer cet élément sans avoir à le suivre pendant son animation.