• Plein écran A

    Plusieurs façons de présenter une image en plein écran.

    Pour définir la taille, on peut lui donner des dimensions adaptatives (%, vw/vh..) afin quelle remplisse la totalité de l'écran de lecture.

    Pour définir le positionnement, on peut choisir de:

    - la faire apparaître en haut de l'écran (moins barres diverses) et à partir du côté gauche; l'inconvénient est que votre article pourra être plus bas et qu'il vous faudra retrouver les vignettes pour ouvrir une seconde image.

    - la faire apparaître à partir du haut du cadre qui la contient (div) et à partir du côté gauche; l'avantage est que vous restez positionnez sur votre montage mais la commande doit être au clic.

    On peut choisir de la faire apparaître au clic ou au survol sur un élément du montage.

    On peut choisir de la faire apparaître par agrandissement à partir du côté haut ou gauche/droit ou par apparition (display)...

    Je voulais illustrer quelques façons de faire mais je vais me cantonné à l'agrandissement dans le cadre du montage qui me semble le plus pratique.

     

    Commençons par un faux plein écran qui n'est qu'un agrandissement au survol, dans le contenant.

    <p style="width: 800px; height: 450px; margin: 5px auto; text-align: left;"><img id="ple1" src="http://ekladata.com/WlUPb3YOyBL6uZNwY_Neqg7c0oY.jpg" alt="" /></p>
    <style><!--
    #ple1{width:800px; height:450px; background:url('http://ekladata.com/WlUPb3YOyBL6uZNwY_Neqg7c0oY.jpg'); background-size:cover; transition:all 1s linear;}
    #ple1:hover{position:absolute;z-index:100; transform:scale(2); }
    --></style>

    **********************

    Pour la fluidité de l'animation, il me semble plus simple de survoler un élément qui en commande un autre mais, dans ce cas, l'animation est au clic:

    <div style="width: 800px; height: 450px; margin: 5px auto; text-align: left;"><input id="ple1a" src="http://ekladata.com/WlUPb3YOyBL6uZNwY_Neqg7c0oY.jpg" type="image" /><img id="ple1b" src="http://ekladata.com/WlUPb3YOyBL6uZNwY_Neqg7c0oY.jpg" alt="" /></div>

    <style><!--
    #ple1a{width:800px; height:450px;}
    #ple1b{position:absolute;z-index:100; width:100%; height:0%; transform:translate(0px,0px); left:0%; background:url('http://ekladata.com/WlUPb3YOyBL6uZNwY_Neqg7c0oY.jpg'); transition:all 1s linear;}
    #ple1a:focus ~ #ple1b{height:56.25%;}

    Pourquoi largeur 100% et hauteur 56.25%: cela correspond au ratio 16/9 de mes images.