• Bouton invisible

    Un visiteur me fait penser à une façon de faire une action au survol; le survol a un inconvénient qui est que lorsqu'on sort de dessus l'élément actif, l'animation s'arrête, ce qui interdit de déplacer cet élément ou de le réduire à zéro, en taille.
    Par contre, on peut réaliser un élément actif transparent, qui animera un autre élément: en survolant cet élément invisible, on peut animer un autre élément qui, dans ce cas là, peut être mobile ou être réduit en taille.
    Survolez cette image.
    Comme vous le voyez, vous pouvez déplacer votre curseur sur l'image, l'animation se poursuit.

     

     

     

     

    <div id="mo">
    <p id="p1">&nbsp;</p>
    <p id="p2">&nbsp;</p>
    <p id="p3">&nbsp;</p>
    </div>
    <style type="text/css"><!--
    #mo{position:relative; width:800px; height:600px; margin:10px auto;}
    #p1{position:absolute; z-index:1; width:800px; height:600px; background:url('http://ekladata.com/8hytLDN-ogp6GURExL3WgsWBosk.jpg'); transform:translate(0px,0px);}
    #p2{position:absolute; z-index:3; width:800px; height:600px; background:url('http://ekladata.com/kCsJr5RQibcXaTo_SyVFhXGwc58/trsp-100x100.png'); transform:translate(0px,0px); background-size:cover;}
    #p3{position:absolute; z-index:2; transition:all 2s linear; width:800px; height:600px; background:url('http://ekladata.com/k0vO34-kZx5kNQ_9eh2uaJPDsUc.jpg'); transform:translate(0px,0px);}
    #p2:hover ~ #p3{width:0px; height:0px; transform:translate(400px, 300px);}
    --></style>

     

    Dans ce montage, il y a, empilées, l'image de fond (1), l'image (3) qui s'anime et l'image transparente (2) qui anime l'image 3, car le bouton doit être écrit avant l'élément animé.
    Cette image transparente est un GIF ou PNG, créé par un logiciel de traitement d'image (The Gimp, Photofiltre...) et qui n'a pas besoin d'être grand car il va s'adapter à votre cadre, par background-size:cover.
    On peut ainsi créer une image transparente de 1px par 1 px et lui donner une adresse, en l'hébergeant: c'est mon adresse image 2 (ici, en 100x100)
    Dans mes fichiers hébergés sur Ekla, j'ai créé quelques dossiers: boutons, flèches, textures ... de façon à disposer d'éléments standards, pour mes montages sans avoir à les héberger à chaque fois.
    Un conseil, avec la nouvelle présentation de la Médiathèque Ekla, donnez un nom genre: 0001boutons pour un tel dossier, afin qu'il se retrouve en haut de liste et rapidement accessible.

     

     

     

     

     

    On peut imaginer ce genre de montage (800x600px), selon ce principe, avec un style bordure imagée; 2 images en 800x600px: survol.
    <div id="moa">
    <p id="p1a">&nbsp;</p>
    <p id="p2a">&nbsp;</p>
    <p id="p3a">&nbsp;</p>
    </div>
    <style type="text/css"><!--
    #moa{position:relative; width:800px; height:600px; margin:10px auto;}
    #p1a{position:absolute; z-index:1; width:800px; height:600px; outline:4px solid white; outline-offset:-4px; background:url('http://ekladata.com/Ek6xELfVxl_6d27PIDXvmkMUzDg.jpg'); transform:translate(0px,0px);}
    #p2a{position:absolute; z-index:3; width:800px; height:600px; background:url('http://ekladata.com/kCsJr5RQibcXaTo_SyVFhXGwc58/trsp-100x100.png'); transform:translate(0px,0px); background-size:cover;}
    #p3a{position:absolute; z-index:2; transition:all 2s linear; width:700px; height:500px; border:4px solid white; background:url('http://ekladata.com/5s8IFCoGyGynUkHM_kzmJ0LwiBg.jpg'); transform:translate(46px,46px);background-size:cover;}
    #p2a:hover ~ #p3a{width:0px; height:0px; transform:translate(400px, 300px); border:0px;}
    --></style>