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

     

     

     

     

    Survolez chaque vignette.