• ZoomB.CSS

    On peut agrandir l'image de fond d'un cadre en choisissant le point de référence de l'agrandissement.

    Il est souhaitable, pour la netteté de l'image agrandie, qu'elle soit au départ assez grande, plus grande que le cadre où elle sera en fond; nous la réduirons pour qu'elle remplisse le cadre et l'agrandirons au survol.

    Nous allons choisir le point de référence de l'agrandissement, qui est, par défaut, l'angle haut/gauche; exemple, si nous voulons agrandir la partie droite/basse de l'image de fond, nous allons modifier le point de référence pour que l'agrandissement se fasse à partir de ce point.

    Contrairement aux codes avec script (javascript), nous n'allons pas pouvoir déplacer la zone sélectionnée par la souris; nous bricolerons pour offrir plusieurs agrandissements de plusieurs parties en ajoutant des boutons, invisibles ou non.

    Commençons par une image en 1920x1080px (16/9) placée en fond d'un cadre de 1000x563px (16/9); survolez ce montage ci-dessous.

     

    Comme vous le voyez, l'image remplit le cadre (background-size:100% 100%;) et l'agrandissement la centre par défaut sur l'angle haut/gauche de l'image.

    <p id="bk1">&nbsp;</p>
    <style><!--
    #bk1{width:1000px; height:563px; margin:10px auto; border:4px ridge white; box-shadow:4px 4px 8px black; background:url('http://ekladata.com/HFPjEnJvvuO6M-ESM-DQB8XJ67o.jpg'); background-size:100% 100%; transition:all 2s linear;}
    #bk1:hover{background-size:200% 200%;}
    --></style>


    Modifions le code pour que le point de référence soit le centre de l'image par l'attribut: background-position:50% 50%;

     

    <p id="bk2">&nbsp;</p>
    <style><!--
    #bk2{width:1000px; height:563px; margin:10px auto; border:4px ridge white; box-shadow:4px 4px 8px black; background:url('http://ekladata.com/7DfrwRDM0CovnuARHyIiXJcLuhI.jpg'); background-size:100% 100%; background-position:50% 50%; transition:all 2s linear;}
    #bk2:hover{background-size:200% 200%;}
    --></style>

    En modifiant les valeurs de background-position, vous allez choisir le point de référence de l'agrandissement:
    0% 0%= angle gauche/haut.
    0% 100%= angle gauche/bas.
    100% 0%= angle droit/haut
    100% 100%=angle droit/bas.


    Une possibilité pour agrandir sur différents points est de commander le point de référence par un bouton; celui-ci peut être visible ou invisible.

    Mon petit amusement va être de vous proposer de survoler les 4 angles du montage ci dessous et son centre; 5 zones réactives (boutons) vont agrandir l'image de fond d'une façon différente.

     

     

     

     

     

     

    <div style="width: 1008px; height: 571px; margin: 10px auto;">

    <p id="hg" class="bt">&nbsp;</p>

    <p id="hd" class="bt">&nbsp;</p>

    <p id="bd" class="bt">&nbsp;</p>

    <p id="bg" class="bt">&nbsp;</p>

    <p id="cc" class="bt">&nbsp;</p>

    <p id="bk3">&nbsp;</p>

    </div>

    <p>...</p>

    <style><!--

    .bt{position:absolute; z-index:5; width:200px; height:150px; } 

    #hg{transform:translate(0px,0px);}

    #hd{ transform:translate(800px,0px);} 

    #bd{transform:translate(800px,413px);}

    #bg{transform:translate(0px,413px);}

    #cc{transform:translate(400px,206px);} 

    #bk3{width:1000px; height:563px; border:4px ridge white; box-shadow:4px 4px 8px black; background:url('http://ekladata.com/WAiVYzQrwmqbgOq3ZDyBxQSymWg.jpg'); background-size:100% 100%;background-position:50% 50%; transition:all 2s linear;}

    #hg:hover ~ #bk3{background-position:0% 0%; background-size:200% 200%;}

    #hd:hover ~ #bk3{background-position:100% 0%; background-size:200% 200%;}

    #bd:hover ~ #bk3{background-position:100% 100%; background-size:200% 200%;}

    #bg:hover ~ #bk3{background-position:0% 100%; background-size:200% 200%;}

    #cc:hover ~ #bk3{background-position:50% 50%; background-size:300% 300%;}

    --></style>