• Exemple 42

     9 images au ratio 16/9; les faire défiler par le curseur latéral puis clic sur chacune pour l'afficher en plein écran (f11 pour affichage plein écran); retour par un clic sur la grande image.


    <div style="width: 50.2vw; height: 9.5vw; border: 0.1vh solid black; text-align: left; margin: 1vh auto; overflow: auto;">

    <input id="bk1" class="bk" src="http://ekladata.com/a-v3zOdNd0TnUk2ut6qgCURJxdE@307x173.jpg" type="image" />

    <input id="bk2" class="bk" src="http://ekladata.com/CrhJhRlX-KxujOqm8Sjv3Iza7us@307x173.jpg" type="image" />

    <input id="bk3" class="bk" src="http://ekladata.com/0OcOrP2ahAD3wLvQVAfTlOghjp0@307x173.jpg" type="image" />

    <input id="bk4" class="bk" src="http://ekladata.com/oRj3GcFGMmy1H6j70ZAD_InajMc@307x173.jpg" type="image" />

    <input id="bk5" class="bk" src="http://ekladata.com/cfTBHKmb7D40AYpBJMkgW_jSsUo@307x173.jpg" type="image" />

    <input id="bk6" class="bk" src="http://ekladata.com/to4By7xeDtM0t9nzVi27t_jAxyU@307x173.jpg" type="image" />

    <input id="bk7" class="bk" src="http://ekladata.com/ctkl9gDHQWYQFIp8KLD-BFhkB3Y@307x173.jpg" type="image" />

    <input id="bk8" class="bk" src="http://ekladata.com/lb9-s4QASJh36QsCZO6P8hlblTM@307x173.jpg" type="image" />

    <input id="bk9" class="bk" src="http://ekladata.com/O9sdRTDJHaZ5MQQi_Z93XUwYjmc@307x173.jpg" type="image" />

    <img id="ak1" class="ak" src="http://ekladata.com/a-v3zOdNd0TnUk2ut6qgCURJxdE.jpg" alt="" />

    <img id="ak2" class="ak" src="http://ekladata.com/CrhJhRlX-KxujOqm8Sjv3Iza7us.jpg" alt="" />

    <img id="ak3" class="ak" src="http://ekladata.com/0OcOrP2ahAD3wLvQVAfTlOghjp0.jpg" alt="" />

    <img id="ak4" class="ak" src="http://ekladata.com/oRj3GcFGMmy1H6j70ZAD_InajMc.jpg" alt="" />

    <img id="ak5" class="ak" src="http://ekladata.com/cfTBHKmb7D40AYpBJMkgW_jSsUo.jpg" alt="" />

    <img id="ak6" class="ak" src="http://ekladata.com/to4By7xeDtM0t9nzVi27t_jAxyU.jpg" alt="" />

    <img id="ak7" class="ak" src="http://ekladata.com/ctkl9gDHQWYQFIp8KLD-BFhkB3Y.jpg" alt="" />

    <img id="ak8" class="ak" src="http://ekladata.com/lb9-s4QASJh36QsCZO6P8hlblTM.jpg" alt="" />

    <img id="ak9" class="ak" src="http://ekladata.com/O9sdRTDJHaZ5MQQi_Z93XUwYjmc.jpg" alt="" /></div>
    <style><!--
    .bk{width:16vw; height:9vw; border:0.4vh solid white;}
    .ak{position:absolute; z-index:100; width:100vw; height:0vw; left:0; top:0vw; transition:all 1s linear;}
    #bk1:focus ~ #ak1,#bk2:focus ~ #ak2,#bk3:focus ~ #ak3,#bk4:focus ~ #ak4,#bk5:focus ~ #ak5,#bk6:focus ~ #ak6,#bk7:focus ~ #ak7,#bk8:focus ~ #ak8,#bk9:focus ~ #ak9{height:56.25vw;}
    --></style>