• Plein écran base 2

    Ma seconde écriture oblige à commander par un bouton la grande image cachée.

    L'agrandissement de la grande image peut être à votre convenance, en forme et animation.

    Le bouton de l'exemple peut prendre diverses formes dont un mot, un gif, une vignette...

    <div style="width: 60vw; height: 10vw; margin: 0.1vh auto; text-align: center;"><input id="xxa1" type="text" value="clic" /> <img id="xxb1" src="http://ekladata.com/Nst37eIe45XfpL9GtA2FRcFa5vU.jpg" alt="" /></div>

    <style><!--
    #xxa1{position:absolute; z-index:5; width:6vw; height:2vw; background:lime; text-align:center; line-height:2vw; font-size:1.5vw; color:brown!important; box-shadow:inset 0.4vh 0.4vh 0.6vh white, inset -0.4vh -0.4vh 0.6vh black;}
    #xxb1{position:absolute; z-index:1; width:0vw; height:0vw; border-radius:50%; left:50vw; transform:translate(0vw,0vw); transition:all 1.5s linear;}
    #xxa1:focus ~ #xxb1{z-index:100; width:100vw; height:56.25vw; border-radius:0%; left:0; transform:translate(0vw,-10vw);}
    --></style>

    L'image est ici réduite à 0vw/0vw et de forme ovale pour passer à 100vw/56.25vw rectangulaire.

    Nous pouvons l'animer de bien d'autres façons: arrivée latérale, verticale ou tout autre variation.

    Nous pouvons multiplier les commandes (boutons) et les images correspondantes en pensant tout de même au poids de notre article.

    Un clic sur l'image agrandie fait retourner au départ directement.