Art.04b.10.21

4 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;"><img id="eau1" class="eau" src="http://ekladata.com/otPmO2W7Dmf_uBd-fRDf4ZSSBJ4@1000x562.jpg" alt="" /> <img id="eau2" class="eau" src="http://ekladata.com/Br4GOv2EAkFPMgvmm7WnPcLBlXw@1000x562.jpg" alt="" /> <img id="eau3" class="eau" src="http://ekladata.com/C1bDkkAkAobqjYbpTrQcTZHUzK0@1000x562.jpg" alt="" /> <img id="eau4" class="eau" src="http://ekladata.com/9FQa11EKiHN1Gt7KnEqU47BYRgE@1000x562.jpg" alt="" />
<p id="eau0">SURVOL</p>
</div>
<style><!--
#eau0{position:absolute; z-index:1; width:150px; font-size:25px; transform:translate(70px,50px) rotate(35deg);}
.eau{position:absolute; z-index:1; width:1000px; height:562px; border:6px ridge white; transition:all 1s ;}
#eau1{clip-path:polygon(10% 0%, 90% 0%, 50% 45%, 50% 45%);}
#eau2{clip-path:polygon(55% 50%, 100% 0%, 100% 100%, 55% 50%);}
#eau3{clip-path:polygon(50% 55%, 50% 55%, 90% 100%, 10% 100%);}
#eau4{clip-path:polygon(0% 0%, 45% 50%, 45% 50%, 0% 100%);}
#eau1:hover,#eau2:hover,#eau3:hover,#eau4:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>