Exemple 68

1+6 images au ratio 16/9, redimensionnées par le code en 1152x648px.

Survolez chaque triangle et losange de la partie droite du montage.

<div style="width: 60vw; height: 33.755vw; margin: 1vh auto; border: 0.1vh solid black; background: url('http://ekladata.com/zow1zjYmyS3XqwTTwaE5iw14g3I@1152x648.jpg'); background-size: cover;">
<p id="clpd1" class="clp">&nbsp;</p>
<p id="clpd2" class="clp">&nbsp;</p>
<p id="clpd3" class="clp">&nbsp;</p>
<p id="clpd4" class="clp">&nbsp;</p>
<p id="clpd5" class="clp">&nbsp;</p>
<p id="clpd6" class="clp">&nbsp;</p>
<p id="clpg1" class="clp">&nbsp;</p>
<p id="clpg2" class="clp">&nbsp;</p>
<p id="clpg3" class="clp">&nbsp;</p>
<p id="clpg4" class="clp">&nbsp;</p>
<p id="clpg5" class="clp">&nbsp;</p>
<p id="clpg6" class="clp">&nbsp;</p>
</div>

<style><!--
.clp{position:absolute; z-index:1; background-size:60vw 33.75vw; transition:all 1s linear ;}
#clpd1{width:30vw; height:33.75vw; background:url('http://ekladata.com/8BLTSTMy1ZbR9LH2juVbc0nUFkg@1152x648.jpg'); background-position:-30vw 0vw; clip-path: polygon(75% 0, 100% 0, 100% 25%, 100% 25%); transform:translate(30vw,0vw);}
#clpd2{width:30vw; height:33.75vw; background:url('http://ekladata.com/MysHzoUt4GjjDdo1wmxLO7U0zBE@1152x648.jpg'); background-position:-30vw 0vw; clip-path: polygon(0% 0, 25% 0, 0% 25%, 0% 25%); transform:translate(30vw,0vw);}
#clpd3{width:30vw; height:33.75vw; background:url('http://ekladata.com/D4yznl5-EuzP7ENWSfsil3luJVY@1152x648.jpg'); background-position:-30vw -33.75vw; clip-path: polygon(100% 75%, 100% 75%, 100% 100%, 75% 100%); transform:translate(30vw,0vw);}
#clpd4{width:30vw; height:33.75vw; background:url('http://ekladata.com/OA9h8noH2HUu2WUZwG4_5erBJu0@1152x648.jpg'); background-position:-30vw -33.75vw; clip-path: polygon(0% 75%, 0% 75%,25% 100%, 0% 100%); transform:translate(30vw,0vw);}
#clpd5{width:30vw; height:33.75vw; background:url('http://ekladata.com/0Rvtt0YA3e1v3O04hWVzpD0Np1Y@1152x648.jpg'); background-position:-30vw -33.75vw; clip-path: polygon(50% 0%, 75% 25%, 50% 50%, 25% 25%); transform:translate(30vw,0vw);}
#clpd6{width:30vw; height:33.75vw; background:url('http://ekladata.com/Ah3udus_9se9liy9tTQlyb5KLHk@1152x648.jpg'); background-position:-30vw -33.75vw; clip-path: polygon(50% 0%, 75% 25%, 50% 50%, 25% 25%); transform:translate(30vw,16.875vw);}

#clpg1{width:30vw; height:33.75vw; background:url('http://ekladata.com/8BLTSTMy1ZbR9LH2juVbc0nUFkg@1152x648.jpg');clip-path: polygon(0% 0, 25% 0, 0% 25%, 0% 25%); transform:translate(0vw,0vw);}
#clpg2{width:30vw; height:33.75vw; background:url('http://ekladata.com/MysHzoUt4GjjDdo1wmxLO7U0zBE@1152x648.jpg');clip-path: polygon(75% 0, 100% 0, 100% 25%, 100% 25%); transform:translate(0vw,0vw);}
#clpg3{width:30vw; height:33.75vw; background:url('http://ekladata.com/D4yznl5-EuzP7ENWSfsil3luJVY@1152x648.jpg');clip-path: polygon(0% 75%, 0% 75%, 25% 100%, 0% 100%); transform:translate(0vw,0vw);}
#clpg4{width:30vw; height:33.75vw; background:url('http://ekladata.com/OA9h8noH2HUu2WUZwG4_5erBJu0@1152x648.jpg');clip-path: polygon(100% 75%, 100% 75%, 100% 100%, 75% 100%); transform:translate(0vw,0vw);}
#clpg5{width:30vw; height:33.75vw; background:url('http://ekladata.com/0Rvtt0YA3e1v3O04hWVzpD0Np1Y@1152x648.jpg'); clip-path: polygon(50% 0%, 75% 25%, 50% 50%, 25% 25%); transform:translate(0vw,0vw);}
#clpg6{width:30vw; height:33.75vw; background:url('http://ekladata.com/Ah3udus_9se9liy9tTQlyb5KLHk@1152x648.jpg'); clip-path: polygon(50% 0%, 75% 25%, 50% 50%, 25% 25%); transform:translate(0vw,16.875vw);}

#clpd1:hover,#clpd2:hover,#clpd3:hover,#clpd4:hover,#clpd5:hover,#clpd6:hover{z-index:5; clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%); transform:translate(30vw,0vw);}
#clpd1:hover ~ #clpg1,#clpd2:hover ~ #clpg2,#clpd3:hover ~ #clpg3,#clpd4:hover ~ #clpg4,#clpd5:hover ~ #clpg5,#clpd6:hover ~ #clpg6{z-index:5; clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%); transform:translate(0vw,0vw);}
--></style>