• Plein écran 28

    6 images en 1920px par 1080px dans cet exemple.

    Clic pour ouvrir et clic pour refermer.


    <p><span style="background-color: #00ffff;">Clic pour ouvrir et clic pour refermer.</span></p>
    <div style="width: 60vw; height: 56.25vw; text-align: left;"><input id="py1" class="py" type="text" /> <input id="py2" class="py" type="text" /> <input id="py3" class="py" type="text" /> <input id="py4" class="py" type="text" /> <input id="py5" class="py" type="text" /> <input id="py6" class="py" type="text" /> <input id="bt" type="text" /></div>

    <style><!--
    #bt{position:absolute; z-index:1; width:100vw; height:56.25vw; left:0; background:transparent; border:none;}
    .py{position:absolute; z-index:10; width:8vw; height:15vw; border-radius:4vw; box-shadow: inset -0.4vh -0.4vh 0.6vh white, inset 0.4vh 0.4vh 0.6vh black; transition:transform 1s linear, width 1s linear, height 1s linear, background 1s linear, border-radius 1s linear, box-shadow 1s linear, z-index 0s linear;}
    #py1{background:url('http://ekladata.com/deo--6tcMcdcfUYz0u3A2EAVn4A.jpg'); background-size:100vw 56.25vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #py2{background:url('http://ekladata.com/fW7RjdcSxeAPWtLCcvBMga_EkSg.jpg'); background-size:100vw 56.25vw; background-position:-10vw 0vw; transform:translate(10vw,0vw);}
    #py3{background:url('http://ekladata.com/v9n_dnD-7Qq0BiQ07WEJxDi8hIo.jpg'); background-size:100vw 56.25vw; background-position:-20vw 0vw;transform:translate(20vw,0vw);}
    #py4{background:url('http://ekladata.com/0bMRiZYU0T0JsbrZWb7QtCDaaJw.jpg'); background-size:100vw 56.25vw; background-position:-30vw 0vw; transform:translate(30vw,0vw);}
    #py5{background:url('http://ekladata.com/2RQMFpHChtLluURfxXZHkOnEfsI.jpg'); background-size:100vw 56.25vw; background-position:-40vw 0vw; transform:translate(40vw,0vw);}
    #py6{background:url('http://ekladata.com/2RQMFpHChtLluURfxXZHkOnEfsI.jpg'); background-size:100vw 56.25vw; background-position:-50vw 0vw; transform:translate(50vw,0vw);}
    #py1:focus,#py2:focus,#py3:focus,#py4:focus,#py5:focus,#py6:focus{z-index:100; width:100vw; height:56.25vw; border-radius:0vw; left:0; background-position:0vw 0vw; transform:translate(0vw,0vw); box-shadow:none;}
    #py1:focus ~ #bt,#py2:focus ~ #bt,#py3:focus ~ #bt,#py4:focus ~ #bt,#py5:focus ~ #bt,#py6:focus ~ #bt{z-index:110;}
    --></style>