Exemple 46

Survol

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

La sélection (clip-path) n'accepte pas les bordures; nous pouvons ruser en plaçant, dessous, un paragraphe de la même forme et d'une taille légèrement supérieure pour qu'elle dépasse en simulant une bordure, et en acceptant une ombre.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;">
<p id="blc1" class="blc">&nbsp;</p>
<p id="blc2" class="blc">&nbsp;</p>
<p id="blc3" class="blc">&nbsp;</p>
<p id="blc4" class="blc">&nbsp;</p>
<p id="blc5" class="blc">&nbsp;</p>
<p id="blc6" class="blc">&nbsp;</p>
<p id="sel1" class="sel">&nbsp;</p>
<p id="sel2" class="sel">&nbsp;</p>
<p id="sel3" class="sel">&nbsp;</p>
<p id="sel4" class="sel">&nbsp;</p>
<p id="sel5" class="sel">&nbsp;</p>
<p id="sel6" class="sel">&nbsp;</p>
</div>

<style><!--
.blc{position:absolute; z-index:1; width:11vw; height:11vw; box-shadow:0.4vh 0.4vh 0.6vh black; background:white;}
#blc1{transform:translate(8vw,3vw) rotate(45deg);}
#blc2{transform:translate(8vw,19vw) rotate(45deg);}
#blc3{transform:translate(24vw,3vw) rotate(45deg);}
#blc4{transform:translate(24vw,19vw) rotate(45deg);}
#blc5{transform:translate(40vw,3vw) rotate(45deg);}
#blc6{transform:translate(40vw,19vw) rotate(45deg);}
.sel{position:absolute; z-index:2; width:60vw; height:33.75vw; transition:all 1s linear;}
#sel1{background:url('http://ekladata.com/K1Bch2slbjZGAn2eKebcEpjVKXY@1152x648.jpg');clip-path: polygon(13.5vw 2vw, 20vw 8.5vw, 13.5vw 15vw, 7vw 8.5vw);}
#sel2{background:url('http://ekladata.com/WsJSs91_2p17Ne5QQKEUAVUTStY@1152x648.jpg');clip-path: polygon(13.5vw 18vw, 20vw 24.5vw, 13.5vw 31vw, 7vw 24.5vw);}
#sel3{background:url('http://ekladata.com/CcfMlEaDmyaKwUF_PsZMS_XioBU@1152x648.jpg');clip-path: polygon(29.5vw 2vw, 36vw 8.5vw, 29.5vw 15vw, 23vw 8.5vw);}
#sel4{background:url('http://ekladata.com/Q1lym9JGm-wO6kKWNd6qaIO9esA@1152x648.jpg');clip-path: polygon(29.5vw 18vw, 36vw 24.5vw, 29.5vw 31vw, 23vw 24.5vw);}
#sel5{background:url('http://ekladata.com/jLC7Yq9jLNgWsCNhHwLOJeUcP0g@1152x648.jpg');clip-path: polygon(45.5vw 2vw, 52vw 8.5vw, 45.5vw 15vw, 39vw 8.5vw);}
#sel6{background:url('http://ekladata.com/7nRPxJ9wHr1WnSrDPrjBWfU-DdU@1152x648.jpg');clip-path: polygon(45.5vw 18vw, 52vw 24.5vw, 45.5vw 31vw, 39vw 24.5vw);}
#sel1:hover,#sel2:hover,#sel3:hover,#sel4:hover,#sel5:hover,#sel6:hover{z-index:5;clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw);}
--></style>