• Retour clic

    Montage en 1200x675px + bordure avec 6 images au ratio 16/9. 

    Le but de cette page est de simplifier l'écriture du retour de clic qui, dans mes essais précédent, était par un élément pour chacun; dans ce code, un seul élément (ret) sert de retour au 6 clics.

    La commande par clic permet de superposer les éléments sans désordre à l'animation.

     

    Clic pour agrandir et clic pour réduire.


    <div style="position: relative; overflow: hidden; width: 1200px; height: 675px; margin: 50px auto; text-align: left; border: 6px ridge grey;"><input id="sty1" class="sty" type="text" /> <input id="sty2" class="sty" type="text" /> <input id="sty3" class="sty" type="text" /> <input id="sty4" class="sty" type="text" /> <input id="sty5" class="sty" type="text" /> <input id="sty6" class="sty" type="text" />
    <p id="ret">&nbsp;</p>
    <p id="act">Clic pour agrandir et clic pour r&eacute;duire.</p>
    </div>
    <style><!--
    #ret{position:absolute; z-index:1; width:1200px; height:675px;}
    #act{position:absolute; z-index:1; width:150px; font-size:35px; transform:translate(550px,200px);}
    .sty{position:absolute; width:1200px; height:675px; border:4px solid white; transition:all 1s;}
    #sty1{z-index:2; box-sizing:border-box; background:url('http://ekladata.com/PZJOp27YQUXtsfBonUD2k4jPwXI.jpg'); background-size:1200px 675px; transform:translate(-500px,0px) rotate(-70deg);}
    #sty2{z-index:3; box-sizing:border-box; background:url('http://ekladata.com/WT5gsV0sZ_YsIt_LtxPIUMbl5zw.jpg'); background-size:1200px 675px; transform:translate(500px,0px) rotate(-80deg);}
    #sty3{z-index:4; box-sizing:border-box; background:url('http://ekladata.com/acGhW7ebMPujsYf9oU2qwx-lKkU.jpg'); background-size:1200px 675px; transform:translate(-50px,-550px) rotate(-20deg);}
    #sty4{z-index:5; box-sizing:border-box; background:url('http://ekladata.com/wr4SwCJ4EbiytlDY10XqgGepcp8.jpg'); background-size:1200px 675px; transform:translate(850px,0px) rotate(60deg);}
    #sty5{z-index:6; box-sizing:border-box; background:url('http://ekladata.com/lrFfWCWv5ZnFmZBlHdsMPcF4y6w.jpg'); background-size:1200px 675px; transform:translate(80px,550px) rotate(-10deg);}
    #sty6{z-index:7; box-sizing:border-box; background:url('http://ekladata.com/IVNSAvdDQAeBvfTXnkE4fGAJmgk.jpg'); background-size:1200px 675px; transform:translate(-800px,0px) rotate(60deg);}
    #sty1:focus,#sty2:focus,#sty3:focus,#sty4:focus,#sty5:focus,#sty6:focus{z-index:10; transform:translate(0px,0px) rotate(0deg);}
    #sty1:focus ~ #ret,#sty2:focus ~ #ret,#sty3:focus ~ #ret,#sty4:focus ~ #ret,#sty5:focus ~ #ret,#sty6:focus ~ #ret{z-index:15;}
    --></style>