construction 4

Toujours en partant du même principe, nous allons ajouter une animation en rotation de la vignette à son survol.

Essayons ce code pour 4 images mais vous pouvez en ajouter:

<div style="width:60vw; height:69vh; margin:2vh auto; border:0.3vh ridge white; background:linear-gradient(to bottom, rgba(100,0,100,0.5) 0%, rgba(0,100,100,0.5) 100%);">
<p id="vg1e">&nbsp;</p>
<p id="vg2e">&nbsp;</p>
<p id="vg3e">&nbsp;</p>
<p id="vg4e">&nbsp;</p>
<p id="vg5e">Survolez chaque vignette.</p>
</p>
</div>
<style><!--
#vg1e{position:absolute; z-index:1;width:8vw; height:17vh; border-radius:50%; border:0.2vh solid white; box-shadow:0.2vh 0.2vh 0.5vh black; background:url('https://ekladata.com/eArYQ3JwIhf4cZkYEFqxOVWuVhI.jpg'); background-size:cover; transform:translate(10vw,10vh) rotate(350deg); transition:all 1s linear;}
#vg2e{position:absolute; z-index:1;width:8vw; height:17vh; border-radius:50%; border:0.2vh solid white; box-shadow:0.2vh 0.2vh 0.5vh black; background:url('https://ekladata.com/zv5LMPlklZA7_AMUeXrGZqSKROo.jpg'); background-size:cover; transform:translate(40vw,10vh) rotate(350deg); transition:all 1s linear;}
#vg3e{position:absolute; z-index:1;width:8vw; height:17vh; border-radius:50%; border:0.2vh solid white; box-shadow:0.2vh 0.2vh 0.5vh black; background:url('https://ekladata.com/YdDgU1buax_hJQ2NpDjnl81_Fh8.jpg'); background-size:cover; transform:translate(10vw,40vh) rotate(350deg); transition:all 1s linear;}
#vg4e{position:absolute; z-index:1;width:8vw; height:17vh; border-radius:50%; border:0.2vh solid white; box-shadow:0.2vh 0.2vh 0.5vh black; background:url('https://ekladata.com/jClMtLiAr7sMXLhD39h-jAXqXpk.jpg'); background-size:cover; transform:translate(40vw,40vh) rotate(350deg); transition:all 1s linear;}
#vg5e{position:absolute; z-index:1;width:60vw; text-align:center; font-size:4vh; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(0vw,60vh);}
#vg1e:hover, #vg2e:hover, #vg3e:hover, #vg4e:hover{z-index:5; width:60vw; height:69vh; transform:translate(0vw,0vh) rotate(0deg); border-radius:0%; box-shadow:0 0;}
--></style>