• Exemple 47

    J'ai l'habitude de proposer des agrandissements qui partent d'une petite image pour l'agrandir en grande image; voici un essai de l'inverse:

    partir d'une partie de grande image pour revenir à l'image entière en taille d'origine.

    Survol de quelques photos de l'Aubrac.

     

     

     

     

     


    <div style="width: 60vw; height: 34vw; margin: 1vh auto; text-align: left; border: 0.1vh solid black;">
    <p id="inv1" class="inv">&nbsp;</p>
    <p id="inv2" class="inv">&nbsp;</p>
    <p id="inv3" class="inv">&nbsp;</p>
    <p id="inv4" class="inv">&nbsp;</p>
    <p id="inv5" class="inv">&nbsp;</p>
    </div>

    <style><!--
    .inv{position:absolute; z-index:1; width:16vw; height:9vw; transition:all 1s linear;}
    #inv1{ background:url('http://ekladata.com/5EeJqOOO3RNTNsN_e-qyInnS_LY.jpg'); background-position:-60vw -45vw; background-size:240vw 135vw; transform:translate(3vw,0vw);}
    #inv2{ background:url('http://ekladata.com/DJtCPWcyzwKs1Omo6BYwl3_I9kM.jpg'); background-position:-100vw -45vw;  background-size:240vw 135vw; transform:translate(22vw,0vw);}
    #inv3{ background:url('http://ekladata.com/9graYb0RvX4cE5aFXTV81FISqDo.jpg'); background-position:-200vw -45vw;  background-size:240vw 135vw; transform:translate(41vw,0vw);}
    #inv4{ background:url('http://ekladata.com/HRVPN4ZyJ5b7eDTemxl-gwPvm84.jpg'); background-position:-60vw -67.5vw;  background-size:240vw 135vw; transform:translate(9.5vw,12vw);}
    #inv5{ background:url('http://ekladata.com/ploUSsGrd_EWN_3ehkl3mt_hu4s.jpg'); background-position:-120vw -67.5vw;  background-size:240vw 135vw; transform:translate(31.5vw,12vw);}
    #inv1:hover,#inv2:hover,#inv3:hover,#inv4:hover,#inv5:hover{z-index:5; width:60vw; height:33.75vw; background-size:60vw 33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>