Art.27D.6.21

Survol

*****************
<p style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black;">
<img id="clp1" class="cp" src="http://ekladata.com/0AjQudMqo5V1MuARt7i4fXyG3-U@1000x562.jpg" alt="" />
<img id="clp2" class="cp" src="http://ekladata.com/j_rrgjWO81WuU8TNHDuj6Cr6Z1k@1000x562.jpg" alt="" />
<img id="clp3" class="cp" src="http://ekladata.com/BRrziJJ_Lm2FAolR562au1h8gs0@1000x562.jpg" alt="" />
<img id="clp4" class="cp" src="http://ekladata.com/9gstoXr4S28oCIDxeksheR6G4I4@1000x562.jpg" alt="" />
<img id="clp5" class="cp" src="http://ekladata.com/BJJr6_SEHUdxhtaIIBWJ6pI0RBM@1000x562.jpg" alt="" />
</p>

<style><!--
.cp{position:absolute; z-index:1; transition:all 1s;}
#clp1{ clip-path: polygon(0% 0%, 20% 0%, 5% 50%, 20% 100%, 0% 100%);}
#clp2{clip-path: polygon(22% 10%, 35% 50%, 22% 90%, 10% 50%);}
#clp3{clip-path: polygon(24% 0%, 76% 0%,61% 50%, 76% 100%, 24% 100%, 40% 50%);}
#clp4{clip-path: polygon(78% 10%, 90% 50%, 78% 90%, 66% 50%);}
#clp5{clip-path: polygon(80% 0%, 100% 0%, 100% 100%, 80% 100%, 95% 50%); }
#clp1:hover{z-index:5; clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);}
#clp2:hover,#clp4:hover{z-index:5; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
#clp3:hover{z-index:5; clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%,0% 50%);}
#clp5:hover{z-index:5; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%);}
--></style>