• Clic/survol direct

     

    La question posée est: "Est-il possible d'animer une image ou un élément, d'abord par un clic direct, ensuite par un survol pour revenir en position de départ par un autre clic ?"

    Voici une proposition: clic sur chaque vignette pour l'afficher en taille moyenne, dans le centre du montage; son survol va l'agrandir à la taille du montage et un clic va remettre le montage en position de départ.

    Une contrainte, tout de même, ne pas laisser son curseur sur le chemin de l'image animée car le survol intervient.

    <div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; margin: 1vh auto; background: url('http://ekladata.com/kybhinYuuiJqH2YPkJH-VzJlaRY@1152x648.jpg'); background-size: 60vw 33.75vw;"><input id="st1" class="st" type="text" /><input id="st2" class="st" type="text" /><input id="st3" class="st" type="text" /><input id="st4" class="st" type="text" /><input id="st5" class="st" type="text" /><input id="st6" class="st" type="text" /><input id="st7" class="st" type="text" /> <img id="an1" class="an" src="http://ekladata.com/uSiUyGcy3l2KITWOsuGWHtItF-U.jpg" alt="" /> <img id="an2" class="an" src="http://ekladata.com/2ZbjBqD4yLFF5IrSWNNGamArcDo.jpg" alt="" /> <img id="an3" class="an" src="http://ekladata.com/QqE5h3M7D5vKmrOAlt2RjL7VIK4.jpg" alt="" /> <img id="an4" class="an" src="http://ekladata.com/LeTL87fi5xJifAqRWm0oLLGfPRk.jpg" alt="" /> <img id="an5" class="an" src="http://ekladata.com/wvvo6N5mYz4p7oeg2GXGhiRcauU.jpg" alt="" /> <img id="an6" class="an" src="http://ekladata.com/FVugvn66FRRCZPp5N97lWDnxvXY.jpg" alt="" /> <img id="an7" class="an" src="http://ekladata.com/zh0OxinCM4LRCoA8zh-yjelvurg.jpg" alt="" /></div>
    <style><!--
    .st{position:absolute; z-index:15; width:8vw; height:4.5vw; border:none; background:none;transition:all 1s linear;}
    #st1{transform:translate(5vw,2vw);}
    #st2{transform:translate(15vw,2vw);}
    #st3{transform:translate(25vw,2vw);}
    #st4{transform:translate(35vw,2vw);}
    #st5{transform:translate(45vw,2vw);}
    #st6{transform:translate(5vw,10vw);}
    #st7{transform:translate(5vw,18vw);}

    .an{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
    #an1{ transform:translate(5vw,2vw);}
    #an2{ transform:translate(15vw,2vw);}
    #an3{ transform:translate(25vw,2vw);}
    #an4{ transform:translate(35vw,2vw);}
    #an5{ transform:translate(45vw,2vw);}
    #an6{ transform:translate(5vw,10vw);}
    #an7{ transform:translate(5vw,18vw);}

    #st1:focus,#st2:focus,#st3:focus,#st4:focus,#st5:focus,#st6:focus,#st7:focus{width:16vw; height:4.5vw; background:none; transform:translate(25vw,13vw);}
    #st1:focus ~ #an1,#st2:focus ~ #an2,#st3:focus ~ #an3,#st4:focus ~ #an4,#st5:focus ~ #an5,#st6:focus ~ #an6,#st7:focus ~ #an7{z-index:20; width:16vw; height:9vw; transform:translate(25vw,13vw);}
    #st1:focus ~ #an1:hover,#st2:focus ~ #an2:hover,#st3:focus ~ #an3:hover,#st4:focus ~ #an4:hover,#st5:focus ~ #an5:hover,#st6:focus ~ #an6:hover,#st7:focus ~ #an7:hover{z-index:20; width:60vw; height:33.75vw; border:none; box-shadow:none; transform:translate(0vw,0vw);}
    --></style>