• positionnement 1

    Je propose, en ce moment, des images en plein écran mais leur positionnement est particulier et je voudrais revenir que 2 codes au résultat différent.

    Premier code: left:0; top:0; signifie que l'image va s'agrandir à partir de l'angle haut/gauche de votre écran ce qui ne peut être utilisé que sur des montages en haut de page sinon l'affichage se fera hors de ce qui s'affiche sur votre écran.

    Second code: transform:translate(0vw,0vw); signifie que l'image va s'agrandir à partir de l'angle haut/gauche du contenant de votre montage (<div...).

    Voyons un exemple avec left/top.

    Comme d'habitude: 2 commandes possibles: au clic et/ou au survol.

    Le clic demande de placer la commande dans un élément cliquable (input) et un second clic remet le montage à zéro.

    Le survol oblige à animer l'élément affiché directement.

    *****

    Commençons par le clic et left:0; top:0;

     

     

     


    <div style="width: 25vw; height: 5vw; border: 0.6vh double grey; text-align: left; margin: 1vh auto;"><input id="cde1" class="cde" type="text" value="Clic1" />
    <p id="agra1" class="agra">&nbsp;</p>
    <input id="cde2" class="cde" type="text" value="Clic2" />
    <p id="agra2" class="agra">&nbsp;</p>
    <input id="cde3" class="cde" type="text" value="Clic3" />
    <p id="agra3" class="agra">&nbsp;</p>
    </div>

    <style><!--
    .cde{position:absolute; z-index:1; width:3vw; height:3vw; border-radius:50%; text-align:center; font-size:1vw;}
    #cde1{transform:translate(1vw,1vw); background:lime;}
    #cde2{transform:translate(10vw,1vw); background:yellow;}
    #cde3{transform:translate(20vw,1vw); background:red;}
    .agra{position:absolute; z-index:100; transition:all 1s linear;}
    #agra1{background:lime; width:100vw; height:0vw; left:0; top:5vw;}
    #agra2{background:yellow; width:0vw; height:0vw; left:50vw; top:15vw; }
    #agra3{background:red; width:100vw; height:0vw; left:0vw; top:45vw; }
    #cde1:focus ~ #agra1{height:10vw;left:0vw; }
    #cde2:focus ~ #agra2{width:60vw; height:10vw;left:15vw; border-radius:50%;}
    #cde3:focus ~ #agra3{height:10vw;top:35vw;}
    --></style>

     

    Comme vous le voyez, l'affichage de la grande image peut prendre différentes formes et positionnement.