Art.4.8.21

Même principe que la page précédente mais en vertical. 7 images au ratio 16/9.

Survol

***************
<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left;">
<img id="gt1" class="gt" src="http://ekladata.com/FXLnWoGDlvDfrZQAwbqs3ao8X8U@1000x562.jpg" alt="" />
<img id="gt2" class="gt" src="http://ekladata.com/IdzLONl5X1RSnDcpd_CZRC9IZdc@1000x562.jpg" alt="" />
<img id="gt3" class="gt" src="http://ekladata.com/X_VGcvzB3f-SgmQXMcUlb3bISHY@1000x562.jpg" alt="" />
<img id="gt4" class="gt" src="http://ekladata.com/WhPK0NyUXinLrRwp-noG9IZVzNw@1000x562.jpg" alt="" />
<img id="gt5" class="gt" src="http://ekladata.com/BjKh9FkSJ1y1qhqYRhDwJvWt0w4@1000x562.jpg" alt="" />
<img id="gt6" class="gt" src="http://ekladata.com/MrCAmdDM9uMDHYspO_OUhVr6YuE@1000x562.jpg" alt="" />
<img id="gt7" class="gt" src="http://ekladata.com/dwzLAmkK4TuR0r8eVGsBQdKawIU@1000x562.jpg" alt="" />
<p id="gt0">Survol</p>
</div>

<style><!--
.gt{position:absolute; z-index:1; width:1000px; height:562px; border-radius:50%; transition:all 1s;}
#gt1{clip-path:polygon(0% 0%, 10% 0%, 10% 100%, 0% 100%);}
#gt2{clip-path:polygon(15% 0%, 25% 0%, 25% 100%, 15% 100%);}
#gt3{clip-path:polygon(30% 0%, 40% 0%, 40% 100%, 30% 100%);}
#gt4{clip-path:polygon(45% 0%, 55% 0%, 55% 100%, 45% 100%);}
#gt5{clip-path:polygon(60% 0%, 70% 0%, 70% 100%, 60% 100%);}
#gt6{clip-path:polygon(75% 0%, 85% 0%, 85% 100%, 75% 100%);}
#gt7{clip-path:polygon(90% 0%, 100% 0%, 100% 100%, 90% 100%);}
#gt0{position:absolute; z-index:1; width:120px; font-size:30px; color:gold; text-shadow:2px 2px black;}
#gt1:hover,#gt1:hover,#gt1:hover,#gt1:hover,#gt1:hover,#gt1:hover,#gt1:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>