Etoile des neiges

Sur une demande de code publié, le voici simplifié; pour cela, j'ai très légèrement modifié (invisible) le ratio 16/9 qui fait 1152x648px en 1152x653px.

Cela permet des dimensions en viewport de 60vw par 34vw au lieu de 60vw/33.75vw, plus simple à diviser.

L'attribut clip découpe une image selon le % de ses dimensions, que vous définissez au départ; assez simple à manipuler, une fois l'habitude prise.

Dans cet exemple, 8 images à survoler, dimensionnées par le code en 1152x653px.

<div style="width: 60vw; height: 34vw; border: 0.1vh solid black; margin: 1vh auto; background:white;">
<p id="tr1" class="tr">&nbsp;</p>
<p id="tr2" class="tr">&nbsp;</p>
<p id="tr3" class="tr">&nbsp;</p>
<p id="tr4" class="tr">&nbsp;</p>
<p id="tr5" class="tr">&nbsp;</p>
<p id="tr6" class="tr">&nbsp;</p>
<p id="tr7" class="tr">&nbsp;</p>
<p id="tr8" class="tr">&nbsp;</p>
</div>

<style><!--
.tr{position:absolute; z-index:1; width:60vw; height:34vw; background-size:60vw 34vw; transition:all 1s linear;}
#tr1{background:url('http://ekladata.com/-bWw7KSj8NqoPPVmGRQSSqkHZQs@1152x653.jpg'); clip-path: polygon(2% 6%, 50% 50%, 50% 50%, 2% 48%);}
#tr2{background:url('http://ekladata.com/pbr4PLemeNUzEqRzt6S1j9vuImw@1152x653.jpg'); clip-path: polygon(2% 2%, 49% 2%, 50% 50%, 50% 50%);}
#tr3{background:url('http://ekladata.com/TEhFGZhO4vu-F0CFbro_-nAu414@1152x653.jpg'); clip-path: polygon(51% 2%, 98% 2%, 50% 50%, 50% 50%);}
#tr4{background:url('http://ekladata.com/SqQYejmveTcFJAY6AxO3ICZdVWY@1152x653.jpg'); clip-path: polygon(50% 50%, 98% 6%, 98% 48%, 50% 50%);}
#tr5{background:url('http://ekladata.com/LQjtZn_xLYlb9_mLcKjxh7bXPuk@1152x653.jpg'); clip-path: polygon(50% 50%, 98% 52%, 98% 94%, 50% 50%);}
#tr6{background:url('http://ekladata.com/uuV6H6itlTTLu83tmcSOoWjhBbY@1152x653.jpg'); clip-path: polygon(50% 50%, 50% 50%,98% 98%, 51% 98%);}
#tr7{background:url('http://ekladata.com/2gKGwqb1mngvENNNXYr-emZPPIE@1152x653.jpg'); clip-path: polygon(50% 50%, 50% 50%, 49% 98%, 2% 98%);}
#tr8{background:url('http://ekladata.com/NGuDksaLM0cF1ueWWi678eogE4A@1152x653.jpg'); clip-path: polygon(2% 52%, 50% 50%, 50% 50%, 2% 94%);}
#tr1:hover,#tr2:hover,#tr3:hover,#tr4:hover,#tr5:hover,#tr6:hover,#tr7:hover,#tr8:hover{z-index:5;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>