Mont.23.5.23

9 images au ratio 16/9 dimensionnées en 1100x619px.

<div style="width: 1100px; height: 619px; margin: 30px auto; text-align: left;">
<p id="kfg0">Survol faces</p>
<p id="kfg1" class="kfg">&nbsp;</p>
<p id="kfg2" class="kfg">&nbsp;</p>
<p id="kfg3" class="kfg">&nbsp;</p>
<p id="kfg4" class="kfg">&nbsp;</p>
<p id="kfg5" class="kfg">&nbsp;</p>
<p id="kfg6" class="kfg">&nbsp;</p>
<p id="kfg7" class="kfg">&nbsp;</p>
<p id="kfg8" class="kfg">&nbsp;</p>
<p id="kfg9" class="kfg">&nbsp;</p>
</div>
<style><!--
#kfg0{position:absolute; z-index:1; width:300px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(400px,20px);}
.kfg{position:absolute; z-index:1; width:1100px; height:619px; background-size:1100px 619px; transition:all 1s;}
#kfg1{background:url('http://ekladata.com/wiSGM615w4VKLlR2nAYtMOGuMEc@1100x619.jpg'); clip-path:polygon(10% 30%, 20% 40%, 20% 70%, 10% 60%);}
#kfg2{background:url('http://ekladata.com/8gIKBRZ-MLbmzVv4mIddV13C4l0@1100x619.jpg'); clip-path:polygon(20% 40%,30% 30%, 30% 60%, 20% 70%);}
#kfg3{background:url('http://ekladata.com/JKsrzucrTzJKoQYdr18X7GNJWkM@1100x619.jpg'); clip-path:polygon(10% 30%,20% 20%, 30% 30%, 20% 40%);}
#kfg4{background:url('http://ekladata.com/rlP5vS6Q0L_vvbC_SkskCNw16tI@1100x619.jpg'); clip-path:polygon(40% 30%, 50% 40%, 50% 70%, 40% 60%);}
#kfg5{background:url('http://ekladata.com/epBiKaxwJ3NKaLGb5A6EluP06Qo@1100x619.jpg'); clip-path:polygon(50% 40%,60% 30%, 60% 60%, 50% 70%);}
#kfg6{background:url('http://ekladata.com/qdSIMlMb-NUwOHMZwxtkvHjN47I@1100x619.jpg'); clip-path:polygon(40% 30%,50% 20%, 60% 30%, 50% 40%);}
#kfg7{background:url('http://ekladata.com/ui0RGmvd4jDjnJGMfTqkpaRhPsw@1100x619.jpg'); clip-path:polygon(70% 30%, 80% 40%, 80% 70%, 70% 60%);}
#kfg8{background:url('http://ekladata.com/8FNSmJDkew1d-Wj4Vo3pLj2vNxA@1100x619.jpg'); clip-path:polygon(80% 40%,90% 30%, 90% 60%, 80% 70%);}
#kfg9{background:url('http://ekladata.com/kYdLGz14-YdPyBVYMbvd9C8yklE@1100x619.jpg'); clip-path:polygon(70% 30%,80% 20%, 90% 30%, 80% 40%);}
#kfg1:hover,#kfg2:hover,#kfg3:hover,#kfg4:hover,#kfg5:hover,#kfg6:hover,#kfg7:hover,#kfg8:hover,#kfg9:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>