• Construction 2

    Reprenons le code précédent et remplaçons les couleurs de fond par des images; le code deviendra:

    Mes photos sont en 1920x1080px et hébergées ainsi sur Ekal, dans un album photo, pour en récupérer les adresses.

    Aucune décoration particulière pour que vous retrouviez l'écriture du code précédent.

    <div style="width:60vw; height:69vh; margin:2vh auto; border:0.3vh ridge white; background:url('http://ekladata.com/4937dWBZV4zOpkYascPV9cACf1c.jpg'); background-size:60vw 69vh;">
    <p id="vg1b">&nbsp;</p>
    <p id="vg2b">&nbsp;</p>
    <p id="vg3b">&nbsp;</p>
    <p id="vg4b">&nbsp;</p>
    </p>
    </div>
    <style><!--
    #vg1b{position:absolute; z-index:1;width:10vw; height:12vh; background:url('http://ekladata.com/9PWDz5FZsW6bGCtObQxwxBdHUgw.jpg'); background-size:cover; transform:translate(0vw,0vh); transition:all 1s linear;}
    #vg2b{position:absolute; z-index:1;width:10vw; height:12vh; background:url('http://ekladata.com/lrpS2zpRKeNwT_slKJu0Uxq4ZFQ.jpg'); background-size:cover; transform:translate(17vw,0vh); transition:all 1s linear;}
    #vg3b{position:absolute; z-index:1;width:10vw; height:12vh; background:url('http://ekladata.com/uFvJaEuF5Yqg7xnLHXpgwYasvqk.jpg'); background-size:cover; transform:translate(33vw,0vh); transition:all 1s linear;}
    #vg4b{position:absolute; z-index:1;width:10vw; height:12vh; background:url('http://ekladata.com/lpV2tW3rcsBb2CAbBF1nEfSznDw.jpg'); background-size:cover; transform:translate(50vw,0vh); transition:all 1s linear;}
    #vg1b:hover, #vg2b:hover, #vg3b:hover, #vg4b:hover{z-index:5; width:60vw; height:69vh; transform:translate(0vw,0vh);}
    --></style>

    Ce qui nous donnera l'animation au survol: