cravates

7 images verticales en 380x675px, ratio 16/9

<div style="background: linear-gradient(to top, rgb(180, 221, 180) 0%, rgb(131, 199, 131) 17%, rgb(82, 177, 82) 33%, rgb(0, 138, 0) 67%, rgb(0, 87, 0) 83%, rgb(0, 36, 0) 100%); border: 6px ridge grey; height: 675px; margin: 50px auto; width: 1160px;">

<p id="dia0">SURVOL</p>

<p class="dia" id="dia1">&nbsp;</p>

<p class="dia" id="dia2">&nbsp;</p>

<p class="dia" id="dia3">&nbsp;</p>

<p class="dia" id="dia4">&nbsp;</p>

<p class="dia" id="dia5">&nbsp;</p>

<p class="dia" id="dia6">&nbsp;</p>

<p class="dia" id="dia7">&nbsp;</p>

</div>

<style><!--

#dia0{position:absolute; z-index:1; width:40px; height:600px; font-size:40px; color:white; transform:translate(490px,0px);}  

.dia{position:absolute; z-index:1; width:380px; height:675px; margin-top:0px; transition:all 1s;}

#dia1{transform:translate(0px,0px); background:url('https://i.goopics.net/ntbm6j.jpg'); background-size:380px 675px; clip-path:polygon(20% 0%, 35% 80%, 20% 100%, 5% 80%, 20% 0%);}

#dia2{transform:translate(170px,0px); background:url('https://i.goopics.net/4nfhsb.jpg'); background-size:380px 675px; clip-path:polygon(20% 0%, 35% 80%, 20% 100%, 5% 80%, 20% 0%);}

#dia3{transform:translate(340px,0px); background:url('https://i.goopics.net/pd43oo.jpg'); background-size:380px 675px; clip-path:polygon(20% 0%, 35% 80%, 20% 100%, 5% 80%, 20% 0%);}

#dia4{transform:translate(400px,0px); background:url('https://i.goopics.net/vew055.jpg'); background-size:380px 675px; clip-path:polygon(50% 0%, 65% 80%, 50% 100%, 35% 80%, 50% 0%);}

#dia5{transform:translate(440px,0px); background:url('https://i.goopics.net/qiqmbb.jpg'); background-size:380px 675px; clip-path:polygon(85% 0%, 100% 80%, 85% 100%, 70% 80%, 85% 0%);}

#dia6{transform:translate(610px,0px); background:url('https://i.goopics.net/ll3dvw.jpg'); background-size:380px 675px; clip-path:polygon(85% 0%, 100% 80%, 85% 100%, 70% 80%, 85% 0%);}

#dia7{transform:translate(780px,0px); background:url('https://i.goopics.net/5l36ah.jpg'); background-size:380px 675px; clip-path:polygon(85% 0%, 100% 80%, 85% 100%, 70% 80%, 85% 0%);}

#dia1:hover,#dia2:hover,#dia3:hover{z-index:5; clip-path:polygon(100% 0%, 100% 100%, 20% 100%, 0% 100%, 0% 0%);}

#dia4:hover{z-index:5; clip-path:polygon(100% 0%, 100% 100%, 50% 100%, 0% 100%, 0% 0%);}  

#dia5:hover,#dia6:hover,#dia7:hover{z-index:5; clip-path:polygon(100% 0%, 100% 100%, 85% 100%, 0% 100%, 0% 0%);}

--></style>

SURVOL