• Cible

     6 images au ratio 16/9, redimensionnées par le code en 1152x648px

     

     

     

     

     

     


    <div style="width:60vw; height:33.75vw; margin:1vh auto; text-align:left;">
    <input id="cib1" type="text">
    <input id="cib2" type="text">
    <input id="cib3" type="text">
    <input id="cib4" type="text">
    <input id="cib5" type="text">
    <input id="cib6" type="text">
    <p id="mag1" class="mag">&nbsp;</p>
    <p id="mag2" class="mag">&nbsp;</p>
    <p id="mag3" class="mag">&nbsp;</p>
    <p id="mag4" class="mag">&nbsp;</p>
    <p id="mag5" class="mag">&nbsp;</p>
    <p id="mag6" class="mag">&nbsp;</p>
    </div>

    <style><!--
    #cib1{position:absolute;z-index:2; width:30vw; height:30vw; border-radius:50%; border:0.4vh solid black; background:red; transform:translate(15vw,1.5vw);}
    #cib2{position:absolute;z-index:2; width:25vw; height:25vw; border-radius:50%; border:0.4vh solid black; background:white; transform:translate(17.5vw,4vw);}
    #cib3{position:absolute;z-index:2; width:20vw; height:20vw; border-radius:50%; border:0.4vh solid black; background:yellow; transform:translate(20vw,6.5vw);}
    #cib4{position:absolute;z-index:2; width:15vw; height:15vw; border-radius:50%; border:0.4vh solid black; background:green; transform:translate(22.5vw,9vw);}
    #cib5{position:absolute;z-index:2; width:10vw; height:10vw; border-radius:50%; border:0.4vh solid black; background:pink; transform:translate(25vw,11.5vw);}
    #cib6{position:absolute;z-index:2; width:5vw; height:5vw; border-radius:50%; border:0.4vh solid black; background:blue; transform:translate(27.5vw,14vw);}

    .mag{position:absolute;z-index:1; width:0vw; height:0vw; transform:translate(30vw,13.75vw); background-size:60vw 33.75vw; transition:all 1s linear;}
    #mag1{background:url('http://ekladata.com/7vSws5CMG5yf49IKMdK-mGdl4LY@1152x648.jpg'); background-position:-30vw -13.75vw;}
    #mag2{background:url('http://ekladata.com/3jU310rT_Yh86Bfpj8EAHGVC_BU@1152x648.jpg'); background-position:-30vw -13.75vw;}
    #mag3{background:url('http://ekladata.com/e4-HkQBDPC7cEICvG7vVuWsKtoY@1152x648.jpg'); background-position:-30vw -13.75vw;}
    #mag4{background:url('http://ekladata.com/bXEysSieD3elPX7TWjIbrtLzAyI@1152x648.jpg'); background-position:-30vw -13.75vw;}
    #mag5{background:url('http://ekladata.com/tvDzZ5xQyXhHE8LMKF1dwohto4g@1152x648.jpg'); background-position:-30vw -13.75vw;}
    #mag6{background:url('http://ekladata.com/JNegJctCGeRbbjF7yvlG6LMv0jY@1152x648.jpg'); background-position:-30vw -13.75vw;}
    #cib1:focus ~ #mag1,#cib2:focus ~ #mag2,#cib3:focus ~ #mag3,#cib4:focus ~ #mag4,#cib5:focus ~ #mag5,#cib6:focus ~ #mag6{z-index:10; width:60vw; height:33.75vw; background-position:0vw 0vw;transform:translate(0vw,0vw);}
    --></style>