• Plein écran base 1

    Suite à une question, je reviens sur le principe de mes codes "plein écran".

    J'utilise 2 façons de faire:

    - un clic sur l'image en vignette qui s'agrandit.

    - un clic sur un bouton qui commande l'agrandissement de l'image.

    Commençons par un clic sur une vignette.


    <div style="width: 60vw; height: 10vw; margin: 0.1vh auto; text-align: center;"><input id="xx2" type="text" /> <input id="xx1" type="text" /></div>

    <style><!--
    #xx1{position:absolute; z-index:1; width:0vw; height:0vw; background:transparent; border:none;}
    #xx2{position:absolute; z-index:5; width:16vw; height:9vw; left:40vw; background:url('http://ekladata.com/pbL0QYTq619TykMZgzwkddsQEcE.jpg'); background-size:cover; transition:all 1.5s linear;}
    #xx2:focus{z-index:100; width:100vw; height:56.25vw; left:0; transform:translate(0vw,0vw);}
    #xx2:focus ~ #xx1{z-index:110; width:100vw; height:56.25vw;}
    --></style>


    De façon à pouvoir revenir au départ par un clic, il faut superposer un bouton invisible (xx1) sur l'image agrandie

    L'emploi des imput (cliquables) est que, par défaut, ils ont une bordure et une couleur de fond opaque qu'il faut, dans ce cas, annuler par border:none;background:transparent;

    Ce bouton invisible est placé sous l'image et écrit en deuxième ligne car nous devons l'animer par un clic sur la vignette et que la commande doit toujours être écrite avant l'élément animé même si, comme dans ce cas, le bouton invisible est placé dessous en profondeur (z-index:1;).

    En cliquant sur la vignette (xx2), nous faisons passer le bouton invisible (xx1) du fond (z-index:1;) au premier plan (z-index:110;) ce qui nous permet de revenir au départ en cliquant dessus, un clic annulant le clic précédent.

    La taille du bouton passe de 0vw/0vw à la largeur de l'écran de lecture (100vw,56.25vw) pour un écran au ration 16/9.

    Un clic sur la vignette (xx2) modifie sa taille et sa position en profondeur.

    L'image est placée en fond de la vignette (xx2) qui s'agrandit en passant de z-index:5; à z-index:100;

    Le positionnement de cette vignette est déterminé par ici: left:40vw; ou left:40%; et le positionnement vertical peut être ajusté par transform:translate(0vw,-10vw); par exemple. (pas modifié dans l'exemple).

    La vitesse de transition est déterminée par ici:  transition:all 1.5s linear;

    Cette écriture est un peu moins simple du fait de l'ajout du bouton et du positionnement de la vignette.