• Zoom avant

    Nous pouvons donner un effet d'agrandissement ou de réduction en jouant sur la taille d'une image placée en fond d'un cadre.

    Nous pouvons également choisir le point de  référence de l'animation.

    Survolez cette image:

     


    <p id="zar">&nbsp;</p>
    <style><!--
    #zar{width:60vw; height:33.75vw; border:0.1vh solid black; margin:1vh auto; background:url('http://ekladata.com/Ur9KlZxMKUI2UbvADYB_eI5sNfE.jpg'); background-size:240vw 130vw; background-position:-85vw -25vw; transition:all 3s linear;}
    #zar:hover{background-size:60vw 33.75vw; background-position:0 0;}
    --></style>


     


    On peut faire le mouvement inverse en plaçant une image assez lourde pour rester nette à l'agrandissement.

    On peut également placer des boutons à survoler pour diriger vers différents points de l'image.


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

    <style><!--

    #zav{width:60vw; height:33.75vw; border:0.1vh solid black; margin:1vh auto; background:url('http://ekladata.com/HOzqzlGSXvlK3rRXzMSkvOiAZuI.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; transition:all 3s linear;}
    #zav:hover{background-size:240vw 102vw; background-position:-90vw -28vw;}
    --></style>