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('https://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('https://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('https://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('https://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('https://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: