Art.01.8.21

7 images au ratio 16/9 dimensionnées en 1000x562px par le code.

SURVOL

***************
<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left;">
<p id="gra0">SURVOL</p>
<img id="gm1" class="gm" src="http://ekladata.com/3JCZAQ1Fy3NCg2O3PxqkNQMV0gg@1000x562.jpg" alt="" /> <img id="gm2" class="gm" src="http://ekladata.com/sAS12z95ss9cPgC035peHiZjlH8@1000x562.jpg" alt="" /> <img id="gm3" class="gm" src="http://ekladata.com/B0JLymPtICRGC-qbgdy9-2RukKg@1000x562.jpg" alt="" /> <img id="gm4" class="gm" src="http://ekladata.com/u2StoshZDyF1f7qxd3JSL9hsh84@1000x562.jpg" alt="" /> <img id="gm5" class="gm" src="http://ekladata.com/MNhmB44iybQZLjwKFw-6E8XwNRY@1000x562.jpg" alt="" /> <img id="gm6" class="gm" src="http://ekladata.com/rDAqY0Gp54EwL_gDfH0zBLm1k88@1000x562.jpg" alt="" /> <img id="gm7" class="gm" src="http://ekladata.com/wv87xs_37CTNGbZqubE0gTlwL88@1000x562.jpg" alt="" /></div>
<style><!--
#gra0{position:absolute; z-index:1; font-size:25px;}
.gm{position:absolute; z-index:1; width:1000px; height:562px; border-radius:50%; transition:all 1s;}
#gm1{clip-path:polygon(0% 0%, 100% 0%, 100% 10%, 0% 10%);}
#gm2{clip-path:polygon(0% 15%, 100% 15%, 100% 25%, 0% 25%);}
#gm3{clip-path:polygon(0% 30%, 100% 30%, 100% 40%, 0% 40%);}
#gm4{clip-path:polygon(0% 45%, 100% 45%, 100% 55%, 0% 55%);}
#gm5{clip-path:polygon(0% 60%, 100% 60%, 100% 70%, 0% 70%);}
#gm6{clip-path:polygon(0% 75%, 100% 75%, 100% 85%, 0% 85%);}
#gm7{clip-path:polygon(0% 90%, 100% 90%, 100% 100%, 0% 100%);}
#gm1:hover,#gm2:hover,#gm3:hover,#gm4:hover,#gm5:hover,#gm6:hover,#gm7:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>