• Construction 3

    Repartant du code de base, sans image de fond, ajoutons une décoration aux vignettes.

    Mes images, hébergées en 1920x1080px sont redimensionnées ici en 60vw par 69vh; vous pouvez en ajouter ou en retirer.

    Je vous laisse imaginer d'autres présentations à partir de ce principe; la page suivante sera avec une rotation de la vignette au survol.

    <div style="width:60vw; height:69vh; margin:2vh auto; border:0.3vh ridge white; background:linear-gradient(to bottom, rgba(100,0,0,0.5) 0%, rgba(0,100,1,0.5) 100%);">
    <p id="vg1c">&nbsp;</p>
    <p id="vg2c">&nbsp;</p>
    <p id="vg3c">&nbsp;</p>
    <p id="vg4c">&nbsp;</p>
    <p id="vg5c">Survolez chaque vignette.</p>
    </p>
    </div>
    <style><!--
    #vg1c{position:absolute; z-index:1;width:10vw; height:15vh; border-radius:50%; border:0.2vh solid white; box-shadow:0.2vw 0.2vw 0.5vw black; background:url('http://ekladata.com/OKRg9PFYD8q_yBC55Cb3MHTXer4.jpg'); background-size:cover; transform:translate(0vw,10vh); transition:all 1s linear;}
    #vg2c{position:absolute; z-index:1;width:10vw; height:15vh; border-radius:50%; border:0.2vh solid white; box-shadow:0.2vw 0.2vw 0.5vw black; background:url('http://ekladata.com/PvYYPmMEX6gR7f8wkPHVdS-HXTk.jpg'); background-size:cover; transform:translate(17.5vw,10vh); transition:all 1s linear;}
    #vg3c{position:absolute; z-index:1;width:10vw; height:15vh; border-radius:50%; border:0.2vh solid white; box-shadow:0.2vw 0.2vw 0.5vw black; background:url('http://ekladata.com/uyNf-d5ydw6Zv_OhQ2GLIABLIV8.jpg'); background-size:cover; transform:translate(32.5vw,10vh); transition:all 1s linear;}
    #vg4c{position:absolute; z-index:1;width:10vw; height:15vh; border-radius:50%; border:0.2vh solid white; box-shadow:0.2vw 0.2vw 0.5vw black; background:url('http://ekladata.com/2VwNh8FveW41uzWAscRL0F0Arnc.jpg'); background-size:cover; transform:translate(47.5vw,10vh); transition:all 1s linear;}
    #vg5c{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,50vh);}
    #vg1c:hover, #vg2c:hover, #vg3c:hover, #vg4c:hover{z-index:5; width:60vw; height:69vh; transform:translate(0vw,0vh); border-radius:0%; border:none; box-shadow:0 0;}
    --></style>

     

     

     

     

     

     

    Survolez chaque vignette.