• Exemple 3

    Remplissage du cadre avec 9 vignettes à agrandir au clic puis à réduire au clic.

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;"><input id="z1" class="z" type="text" /><input id="z2" class="z" type="text" /><input id="z3" class="z" type="text" /><input id="z4" class="z" type="text" /><input id="z5" class="z" type="text" /><input id="z6" class="z" type="text" /><input id="z7" class="z" type="text" /><input id="z8" class="z" type="text" /><input id="z9" class="z" type="text" />
    <p id="z0">&nbsp;</p>
    </div>

    <style><!--
    #z0{position:absolute; z-index:1; width:60vw; height:33.75vw;}
    .z{position:absolute; z-index:5; width:20vw; height:11.25vw; box-sizing:border-box; border:0.4vh ridge white; transition:all 1s linear;}
    #z1{transform:translate(0vw,0vw); background:url('http://ekladata.com/ZzrHj-_gK17Iv2yK4c0dEdgH8mA.jpg'); background-size:cover;}
    #z2{transform:translate(20vw,0vw); background:url('http://ekladata.com/MPBUnehHfsPYL7l8oRXsxWPgCZ0.jpg'); background-size:cover;}
    #z3{transform:translate(40vw,0vw); background:url('http://ekladata.com/nCY8LUrgPYhIdVnzJhqCo-QFgaQ.jpg'); background-size:cover;}
    #z4{transform:translate(0vw,11.25vw); background:url('http://ekladata.com/8bumdUYiHtklqFACV00EyS-exWQ.jpg'); background-size:cover;}
    #z5{transform:translate(20vw,11.25vw); background:url('http://ekladata.com/5B7WXO1HWAl214WColN6oG8l3gc.jpg'); background-size:cover;}
    #z6{transform:translate(40vw,11.25vw); background:url('http://ekladata.com/QO7qSKRRE3n0BPLP883ErpzUBKg.jpg'); background-size:cover;}
    #z7{transform:translate(0vw,22.5vw); background:url('http://ekladata.com/-IA8rDckqr8MY4IR2kGJA92MnN8.jpg'); background-size:cover;}
    #z8{transform:translate(20vw,22.5vw); background:url('http://ekladata.com/BfgeeFVevldEebqdfn9s2jaiym8.jpg'); background-size:cover;}
    #z9{transform:translate(40vw,22.5vw); background:url('http://ekladata.com/FH2Z_LXS2WoCipXzqZTMyRVp2Mc.jpg'); background-size:cover;}
    #z1:focus,#z2:focus,#z3:focus,#z4:focus,#z5:focus,#z6:focus,#z7:focus,#z8:focus,#z9:focus{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
    #z1:focus ~ #z0,#z2:focus ~ #z0,#z3:focus ~ #z0,#z4:focus ~ #z0,#z5:focus ~ #z0,#z6:focus ~ #z0,#z7:focus ~ #z0,#z8:focus ~ #z0,#z9:focus ~ #z0{z-index:20;}
    #z0:focus{z-index:1;}
    --></style>