• Plein écran 13

    Je voudrais revenir sur l'affichage en plein écran: pour que l'agrandissement remplisse votre écran, il est préférable de paramétrer votre affichage en plein écran (3 points ou 3 traits, en haut, à droite et cadre (chrome) ou flèche double (FF) selon navigateur) ou alors jouer de la molette de souris !

    Le nombre d'images animées est limité par leur poids afin que le transfert ne soit pas trop long.

    Clic pour ouvrir et clic pour réduire.


    <div style="width: 60vw; height: 5vw; margin: 1vh auto; text-align: center;">
    <input id="nyons1" class="nyons" src="http://ekladata.com/8piQunGZ_31cHJmLHPLhK0BAe1Q@160x90.jpg" type="image" />
    <input id="nyons2" class="nyons" src="http://ekladata.com/BT-fgYiB7a2ugUm00_QuvWE6JKU@160x90.jpg" type="image" />
    <input id="nyons3" class="nyons" src="http://ekladata.com/hYJr8-LV1TIeLfCtsKugL9zbQHo@160x90.jpg" type="image" />
    <input id="nyons4" class="nyons" src="http://ekladata.com/7kDyNPJYvtK-eG-R3OYEispr2_U@160x90.jpg" type="image" />
    <input id="nyons5" class="nyons" src="http://ekladata.com/zcJ3a8b04Gp_jO_msXW1wJolWTM@160x90.jpg" type="image" />
    <input id="nyons6" class="nyons" src="http://ekladata.com/po9WVbZzuuGtyUEl38XW_UpVEB4@160x90.jpg" type="image" />
    <img id="gnyons1" class="gnyons" src="http://ekladata.com/8piQunGZ_31cHJmLHPLhK0BAe1Q.jpg" alt="" />
    <img id="gnyons2" class="gnyons" src="http://ekladata.com/BT-fgYiB7a2ugUm00_QuvWE6JKU.jpg" alt="" />
    <img id="gnyons3" class="gnyons" src="http://ekladata.com/hYJr8-LV1TIeLfCtsKugL9zbQHo.jpg" alt="" />
    <img id="gnyons4" class="gnyons" src="http://ekladata.com/7kDyNPJYvtK-eG-R3OYEispr2_U.jpg" alt="" />
    <img id="gnyons5" class="gnyons" src="http://ekladata.com/zcJ3a8b04Gp_jO_msXW1wJolWTM.jpg" alt="" />
    <img id="gnyons6" class="gnyons" src="http://ekladata.com/po9WVbZzuuGtyUEl38XW_UpVEB4.jpg" alt="" />
    </div>

    <style><!--
    .nyons{position:relative; z-index:1; width:8vw; height:4.5vw; border:0.4vh ridge white; box-shadow:0.4vh 0.4vh 0.6vh black;}
    #nyons1,#nyons2,#nyons3,#nyons4,#nyons5,#nyons6{margin:0 0.5vw; box-sizing:border-box;}
    .gnyons{position:absolute; z-index:100; width:0%; height:0%; left:50%; top:50%; transition:all 1s linear;}
    #nyons1:focus ~ #gnyons1,#nyons2:focus ~ #gnyons2,#nyons3:focus ~ #gnyons3,#nyons4:focus ~ #gnyons4,#nyons5:focus ~ #gnyons5,#nyons6:focus ~ #gnyons6{width:100%; height:66%; left:0; top:15vw;}
    --></style>


    Comme vous le voyez, le code n'est pas bien compliqué et répétitif.

    Les 6 mêmes adresses sont utilisées avec des vignettes réduites en taille et en poids par @160x60

    J'ai utilisé des % à la place des unités viewport, qui elles, sont moins compréhensibles.

    Mes images sont hébergées en 1920x1080px.