Montage 235

1+5 images au ratio 16/9. 

Survol

<div style="width: 50vw; height: 28.1vw; margin: 1vh auto; background: url('http://ekladata.com/kHnZBqCuD9xuWH5p4nWaS_QfeBA.jpg'); background-size: cover; text-align: left;">
<p id="vs">Survol</p>
<img id="mar1" class="mar" src="http://ekladata.com/KfpEpYQXYmPxn0ThS3NroXXP4mE.jpg" alt="" /> <img id="mar2" class="mar" src="http://ekladata.com/WDwMz-5cYqUDrEWDJ5J0msOPV58.jpg" alt="" /> <img id="mar3" class="mar" src="http://ekladata.com/WFWNrT_dquZ19-A6lunNwI5s0ro.jpg" alt="" /> <img id="mar4" class="mar" src="http://ekladata.com/eSAMk16ch_chslN6uYR_LOKlyTM.jpg" alt="" /> <img id="mar5" class="mar" src="http://ekladata.com/Y4ehZuAz_OELfcFftEmblbYraY0.jpg" alt="" /></div>
<style><!--
#vs{position:absolute; z-index:1; width:15vw; font-size:1.5vw; color:white; text-shadow:0.2vh 0.2vh black; transform:translate(35vw,1vw);}
.mar{position:absolute; z-index:5; left:0vw; width:99vw; height:56.25vw; transform:translate(0vw,0vw); filter:grayscale(1); transition:all 1s linear, filter 1s linear 1s;}
#mar1{clip-path: polygon(65% 5%, 70% 5%, 70% 10%, 65% 10%);}
#mar2{clip-path: polygon(65% 13%, 70% 13%, 70% 18%, 65% 18%);}
#mar3{clip-path: polygon(65% 21%, 70% 21%, 70% 26%, 65% 26%);}
#mar4{clip-path: polygon(65% 29%, 70% 29%, 70% 34%, 65% 34%);}
#mar5{clip-path: polygon(65% 37%, 70% 37%, 70% 42%, 65% 42%);}
#mar1:hover,#mar2:hover,#mar3:hover,#mar4:hover,#mar5:hover{z-index:10; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);filter:grayscale(0);}
--></style>