-
Construction 5
En supprimant l'affichage du cadre, avec sa bordure et son fond:
<div style="width: 60vw; height: 69vh; margin: 2vh auto;">
<p id="vg1c"> </p>
<p id="vg2c"> </p>
<p id="vg3c"> </p>
<p id="vg4c"> </p>
<p id="vg5c">Survolez chaque vignette.</p>
</div>
<style><!--
#vg1c{position:absolute; z-index:1;width:12vw; height:24vh; border:0.2vh solid white; box-shadow:0.2vw 0.2vw 0.5vw black; background:url('http://ekladata.com/uSw6mtr_LJsR9uUX74LXfis6YFc.jpg'); background-size:cover; transform:translate(0vw,5vh); transition:all 1s linear;}
#vg2c{position:absolute; z-index:1;width:12vw; height:24vh; border:0.2vh solid white; box-shadow:0.2vw 0.2vw 0.5vw black; background:url('http://ekladata.com/RrGspKQdyOBZxA77OfrSulNQEms.jpg'); background-size:cover; transform:translate(15vw,20vh); transition:all 1s linear;}
#vg3c{position:absolute; z-index:1;width:12vw; height:24vh; border:0.2vh solid white; box-shadow:0.2vw 0.2vw 0.5vw black; background:url('http://ekladata.com/OAx-X4_PVr1pdP7AaFwT6JK_gDs.jpg'); background-size:cover; transform:translate(30vw,5vh); transition:all 1s linear;}
#vg4c{position:absolute; z-index:1;width:12vw; height:24vh; border:0.2vh solid white; box-shadow:0.2vw 0.2vw 0.5vw black; background:url('http://ekladata.com/tRcC3HL1hvoL7H5DUHEudKugD7o.jpg'); background-size:cover; transform:translate(45vw,20vh); transition:all 1s linear;}
#vg5c{position:absolute; z-index:1;width:60vw; text-align:center; font-size:4vh; color:pink; text-shadow:0.2vh 0.2vh 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:none; box-shadow:0 0;}
--></style>Survolez chaque vignette.