Exemple 27

Survol. 8 images au ratio 16/9 dimensionnées en 1352x648px dans le code.

<div style="width: 60vw; height: 33.75vw; border: 0.6vh ridge white; margin: 1vh auto; background: linear-gradient(to bottom, #FA8258 0%, #F8E6E0 100%);">
<p id="pays1" class="pays">&nbsp;</p>
<p id="pays2" class="pays">&nbsp;</p>
<p id="pays3" class="pays">&nbsp;</p>
<p id="pays4" class="pays">&nbsp;</p>
<p id="pays5" class="pays">&nbsp;</p>
<p id="pays6" class="pays">&nbsp;</p>
<p id="pays7" class="pays">&nbsp;</p>
<p id="pays8" class="pays">&nbsp;</p>
</div>
<style><!--
.pays{position:absolute; z-index:1; width:60vw; height:33.75vw; background-size:60vw 33.75vw; transition:all 1s linear;}
#pays1{background:url('http://ekladata.com/gznTxpiiIeUtxxYxwqn6_EeX9ys@1352x648.jpg'); clip-path: polygon(0 0, 20% 0%, 0% 100%, 0% 100%);}
#pays2{background:url('http://ekladata.com/A5Xfl1cDokd24im9frxxha1S1cQ@1352x648.jpg'); clip-path: polygon(25.5% 0%, 45% 0%, 39% 30%, 19.5% 30%);}
#pays3{background:url('http://ekladata.com/8nXBBKH1_cojFDXv0gWJTxGwkQs@1352x648.jpg'); clip-path: polygon(17.5% 40%, 37% 40%, 24% 100%, 5% 100%);}
#pays4{background:url('http://ekladata.com/nb1EOHxDYhcBMAZV_Mj2m0wJf_g@1352x648.jpg'); clip-path: polygon(50.5% 0%, 70.5% 0%, 58% 60%, 38% 60%);}
#pays5{background:url('http://ekladata.com/h6TdmCO5jPmj6WsYOrv0QKXogRQ@1352x648.jpg'); clip-path: polygon(36% 70%, 56% 70%, 49% 100%, 29% 100%);}
#pays6{background:url('http://ekladata.com/v-RN9TGxYjSDAYYpZEA0Wj1CWLo@1352x648.jpg'); clip-path: polygon(75.5% 0%, 95% 0%, 89% 30%, 69% 30%);}
#pays7{background:url('http://ekladata.com/3OBxOQBCO1siaPrDcO6zjJGp5QA@1352x648.jpg'); clip-path: polygon(67.5% 40%, 87.5% 40%, 75% 100%, 55% 100%);}
#pays8{background:url('http://ekladata.com/oxDI9cNlo9OkhwoS0tPJyg3IW88@1352x648.jpg'); clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 80% 100%);}
#pays1:hover,#pays2:hover,#pays3:hover,#pays4:hover,#pays5:hover,#pays6:hover,#pays7:hover,#pays8:hover{z-index:5; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>