• Montage 117

    Notre fidèle américaine a ressorti un de mes vieux codes et je l'ai remis au goût du jour, même si je l'ai déjà proposé, me semble-t-il.

    9 images au ratio 16/9 dont la taille est adaptée par le code.

    Avancement au clic.


    <div style="position: relative; text-align: left; width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.5vh ridge white; overflow: hidden;"><input id="ph0" type="text" /><input id="ph1" class="nic" type="text" /><input id="ph2" class="nic" type="text" /><input id="ph3" class="nic" type="text" /><input id="ph4" class="nic" type="text" /><input id="ph5" class="nic" type="text" /><input id="ph6" class="nic" type="text" /><input id="ph7" class="nic" type="text" /><input id="ph8" class="nic" type="text" />
    <p id="av">Avancement au clic.</p>
    </div>

    <style><!--
    #av{position:absolute; z-index:1; width:18vw; border:0.1vh solid white;text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(5vw,1vw);}
    .nic{position:absolute; z-index:1; width:60vw; height:33.75vw; border:none; transition:all 1s linear;}
    #ph0{background:url('http://ekladata.com/mAlf68HFA34k8NNrms8qwwTrJyk.jpg'); background-size:cover; position:absolute; z-index:1; width:60vw; height:33.75vw; border:none; background-size:cover;}
    #ph1{background:url('http://ekladata.com/Bh7iyBkNchI65LnWxNgdLBG3HDQ.jpg'); background-size:cover; transform:translate(-60vw,0vw);}
    #ph2{background:url('http://ekladata.com/T-deIt2V05rt2sUYpijZXy0rUH4.jpg'); background-size:cover; transform:translate(60vw,0vw);}
    #ph3{background:url('http://ekladata.com/XZPuzDlzm3EjTqMtyZEz7VyyiOA.jpg'); background-size:cover; transform:translate(-60vw,0vw);}
    #ph4{background:url('http://ekladata.com/YkH8i-2aDHxyEOuev0_hOgDNXII.jpg'); background-size:cover; transform:translate(60vw,0vw);}
    #ph5{background:url('http://ekladata.com/ftw65z1Yat5gEq16guCKiKBJV3U.jpg'); background-size:cover; transform:translate(-60vw,0vw);}
    #ph6{background:url('http://ekladata.com/9P6c-vswdlFvN2uIe22gcdQj-6M.jpg'); background-size:cover; transform:translate(60vw,0vw);}
    #ph7{background:url('http://ekladata.com/t4H6YRe7sSTfx16JIeFjDm5AXzg.jpg'); background-size:cover; transform:translate(-60vw,0vw);}
    #ph8{background:url('http://ekladata.com/BQXyb4d9BvuUHnnSI0Rg4tcNoZI.jpg'); background-size:cover; transform:translate(60vw,0vw);}
    #ph0:focus ~ #ph1,#ph1:focus ~ #ph2,#ph2:focus ~ #ph3,#ph3:focus ~ #ph4,#ph4:focus ~ #ph5,#ph5:focus ~ #ph6,#ph6:focus ~ #ph7,#ph7:focus ~ #ph8{z-index:10; transform:translate(0vw,0vw);}
    --></style>