Mai 2019

Voilà mon travail du 1er Mai ! Survol.
9 images en 1920x1080px, hébergées sur Ekla et redimensionnées dans le code en 1152x648px, dans un montage en 1152x648px(60vw x 33.75vw).

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
<p id="mai1" class="mai">&nbsp;</p>
<p id="mai2" class="mai">&nbsp;</p>
<p id="mai3" class="mai">&nbsp;</p>
<p id="mai4" class="mai">&nbsp;</p>
<p id="mai5" class="mai">&nbsp;</p>
<p id="mai6" class="mai">&nbsp;</p>
<p id="mai7" class="mai">&nbsp;</p>
<p id="mai8" class="mai">&nbsp;</p>
<p id="mai9" class="mai">&nbsp;</p>
</div>

<style><!--
.mai{position:absolute; z-index:1; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw); transition:all 1s linear;}
#mai1{background:url('http://ekladata.com/1pkpOvYzqB05X0YSzBS8BE8_lsI@1152x648.jpg');-webkit-clip-path: polygon(0vw 0vw, 25vw 0vw, 25vw 5vw, 5vw 5vw, 5vw 15vw,0vw 15vw); clip-path: polygon(0vw 0vw, 25vw 0vw, 25vw 5vw, 5vw 5vw, 5vw 15vw,0vw 15vw);}
#mai2{background:url('http://ekladata.com/wk3-fKvGo0sZ2Fr8wNUqLtn1_aE@1152x648.jpg'); -webkit-clip-path: polygon(0vw 19.75vw, 5vw 19.75vw, 5vw 28.75vw, 25vw 28.75vw, 25vw 33.75vw,0vw 33.75vw); clip-path: polygon(0vw 19.75vw, 5vw 19.75vw, 5vw 28.75vw, 25vw 28.75vw, 25vw 33.75vw,0vw 33.75vw);}
#mai3{background:url('http://ekladata.com/Z_EZRY0geu9LOks30fZZzsZkX0o@1152x648.jpg'); -webkit-clip-path: polygon(35vw 28.75vw, 55vw 28.75vw, 55vw 19.75vw, 60vw 19.75vw, 60vw 33.75vw,35vw 33.75vw); clip-path: polygon(35vw 28.75vw, 55vw 28.75vw, 55vw 19.75vw, 60vw 19.75vw, 60vw 33.75vw,35vw 33.75vw);}
#mai4{background:url('http://ekladata.com/hKWNaj8QpE9E49Dhhl8NmY8Zb7Y@1152x648.jpg'); -webkit-clip-path: polygon(35vw 0vw, 60vw 0vw, 60vw 15vw, 55vw 15vw, 55vw 5vw,35vw 5vw); clip-path: polygon(35vw 0vw, 60vw 0vw, 60vw 15vw, 55vw 15vw, 55vw 5vw,35vw 5vw);}
#mai5{background:url('http://ekladata.com/cZB5PmpBJlhE4mwTNUdIA3h1QW0@1152x648.jpg'); -webkit-clip-path: polygon(30vw 10vw, 35vw 16.875vw, 30vw 23.75vw, 25vw 16.875vw); clip-path: polygon(30vw 10vw, 35vw 16.875vw, 30vw 23.75vw, 25vw 16.875vw);}
#mai6{background:url('http://ekladata.com/w99CHMTmc8uCDPAp_n_HLdRwZMM@1152x648.jpg'); -webkit-clip-path: polygon(10vw 10vw, 24vw 10vw, 20vw 15vw, 10vw 15vw); clip-path: polygon(10vw 10vw, 24vw 10vw, 20vw 15vw, 10vw 15vw);}
#mai7{background:url('http://ekladata.com/5p3k4_i9D_Cgp_LeQWiDu-_ka6c@1152x648.jpg'); -webkit-clip-path: polygon(10vw 18.75vw, 20vw 18.75vw, 24vw 23.75vw, 10vw 23.75vw); clip-path: polygon(10vw 18.75vw, 20vw 18.75vw, 24vw 23.75vw, 10vw 23.75vw);}
#mai8{background:url('http://ekladata.com/Q4dpIuZgBEE8Jliwlk7rUk-XyAs@1152x648.jpg'); -webkit-clip-path: polygon(40vw 18.75vw, 50vw 18.75vw, 50vw 23.75vw, 36vw 23.75vw); clip-path: polygon(40vw 18.75vw, 50vw 18.75vw, 50vw 23.75vw, 36vw 23.75vw);}
#mai9{background:url('http://ekladata.com/I6GrAj-pvkZfH-gzRBBSgEBMU54@1152x648.jpg'); -webkit-clip-path: polygon(36vw 10vw, 50vw 10vw, 50vw 15vw, 40vw 15vw); clip-path: polygon(36vw 10vw, 50vw 10vw, 50vw 15vw, 40vw 15vw);}
#mai1:hover{z-index:10; -webkit-clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 60vw 33.75vw, 5vw 33.75vw,0vw 33.75vw); clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 60vw 33.75vw, 5vw 33.75vw,0vw 33.75vw);}
#mai2:hover{z-index:10; -webkit-clip-path: polygon(0vw 0vw, 5vw 0vw, 60vw 0vw, 60vw 28.75vw, 60vw 33.75vw,0vw 33.75vw); clip-path: polygon(0vw 0vw, 5vw 0vw, 60vw 0vw, 60vw 28.75vw, 60vw 33.75vw,0vw 33.75vw);}
#mai3:hover{z-index:10; -webkit-clip-path: polygon(0vw 28.75vw, 0vw 0vw, 55vw 0vw, 60vw 0vw, 60vw 33.75vw,0vw 33.75vw); clip-path: polygon(0vw 28.75vw, 0vw 0vw, 55vw 0vw, 60vw 0vw, 60vw 33.75vw,0vw 33.75vw);}
#mai4:hover{z-index:10; -webkit-clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 55vw 33.75vw, 0vw 33.75vw,0vw 5vw); clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 55vw 33.75vw, 0vw 33.75vw,0vw 5vw);}
#mai5:hover{z-index:10; -webkit-clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw); clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw);}
#mai6:hover,#mai7:hover,#mai8:hover,#mai9:hover{z-index:10; -webkit-clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw); clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw);}
--></style>