• Hover,Clic,Active

    D'aucuns se souviendront d'un code qui nous permettait d'afficher 3 images superposées: la première visible au départ, la seconde visible au survol de la première et la troisième au clic sur la seconde et en sortant de sur le montage, on revenait au départ.

    Je viens de m'amuser à essayer de retrouver ce fonctionnement avec des codes en CSS3, qui permettent des transitions dans l'animation, ce que ne permettait pas notre code précédent.

    Dans de montage, vous voyez apparaître une image en fond; au survol, cette image change pour une seconde image; un clic sur la seconde image en fait apparaître une troisième et le clic maintenu sur cette dernière image la fera s'agrandir.

    Le clic maintenu relâché et en sortant de sur le montage, vous revenez en position de départ.

     

    <div id="mg1"><input id="mg2" type="text" /> <input id="mg3" type=" type=" /></div>

    <style><!--

    #mg1{position:relative;  width:1067px; height:600px; border:4px ridge grey; margin:5px auto; background:url(http://ekladata.com/WDXMBPYUmKSFljSNL87bua7yJLo/n441.jpg);}

    #mg2{position:absolute; z-index:2; transition:all 1s linear; transform:translate(0px,0px); width:1067px; height:600px; background:url(http://ekladata.com/jnDgW-q6C8yBUbHFCKDNx7swWmQ/n442.jpg); opacity:0;}

    #mg2:hover{opacity:1;}

    #mg2:focus ~ #mg3{z-index:3;opacity:1;}

    #mg3{position:absolute; z-index:1; transform:translate(0px,0px); transition:all 1s linear; width:1067px; height:600px; background:url(http://ekladata.com/fSnfuiVU6bhRp-ipnzGLZ0TkgZo/n443.jpg); background-size:100%; background-position:center center; opacity:0;}

    #mg3:active{z-index:3;background-size:400%; background-position:center center; opacity:1;}

    --></style>

    La première image est en fond du montage (id="mg1)/ la seconde image est en fond d'un cadre au clic (input id="mg2") et est transparente; au survol, elle devient opaque./ La troisième image est en fond de cadre au clic (input id="mg3"), transparente et placée en dessous de la seconde; au clic sur la seconde, on fait remonter la troisième au premier plan et devenir opaque./  En maintenant le clic gauche de la souris enfoncé (active), on modifie la taille de la troisième image en fond, passant de 100% à 400%.
    ...