Art.27B.6.21

SURVOL

<p style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black;">
<img id="clp1" src="http://ekladata.com/wX0eg1DR5yTecafFkafFzmxCcEI@1000x562.jpg" alt="" />
<img id="clp2" src="http://ekladata.com/JCdhCUWySPITb4JQCm9_tNhszrM@1000x562.jpg" alt="" />
<img id="clp3" src="http://ekladata.com/UU_Ud75wfjZmeVqIURNjwv5Bhls@1000x562.jpg" alt="" />
<img id="clp4" src="http://ekladata.com/Qu523ZjxV_XIBkTa_bvil2NG5Fw@1000x562.jpg" alt="" />
<img id="clp5" src="http://ekladata.com/jqDTYIPAMfyK-nrJieLKupqScAQ@1000x562.jpg" alt="" />
</p>

<style><!--
#clp1{position:absolute; z-index:1; clip-path: polygon(0% 0%, 20% 0%, 20% 100%, 0% 100%); transition:all 1s;}
#clp2{position:absolute; z-index:1; clip-path: polygon(20% 0%, 40% 0%, 40% 100%, 20% 100%); transition:all 1s;}
#clp3{position:absolute; z-index:1; clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%); transition:all 1s;}
#clp4{position:absolute; z-index:1; clip-path: polygon(60% 0%, 80% 0%, 80% 100%, 60% 100%); transition:all 1s;}
#clp5{position:absolute; z-index:1; clip-path: polygon(80% 0%, 100% 0%, 100% 100%, 80% 100%); transition:all 1s;}
#clp1:hover,#clp2:hover,#clp3:hover,#clp4:hover,#clp5:hover{z-index:5; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>

********************

Comme vous le voyez dans ce code "brut de fonderie", des attributs sont communs aux 5 images: on peut les regrouper dans une class:

<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/wX0eg1DR5yTecafFkafFzmxCcEI@1000x562.jpg" alt="" />
<img id="clp2" class="cp" src="http://ekladata.com/JCdhCUWySPITb4JQCm9_tNhszrM@1000x562.jpg" alt="" />
<img id="clp3" class="cp" src="http://ekladata.com/UU_Ud75wfjZmeVqIURNjwv5Bhls@1000x562.jpg" alt="" />
<img id="clp4" class="cp" src="http://ekladata.com/Qu523ZjxV_XIBkTa_bvil2NG5Fw@1000x562.jpg" alt="" />
<img id="clp5" class="cp"  src="http://ekladata.com/jqDTYIPAMfyK-nrJieLKupqScAQ@1000x562.jpg" alt="" />
</p>

<style><!--

.cp{position:absolute; z-index:1; transition:all 1s;}
#clp1{ clip-path: polygon(0% 0%, 20% 0%, 20% 100%, 0% 100%);}
#clp2{clip-path: polygon(20% 0%, 40% 0%, 40% 100%, 20% 100%);}
#clp3{clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%);}
#clp4{clip-path: polygon(60% 0%, 80% 0%, 80% 100%, 60% 100%);}
#clp5{clip-path: polygon(80% 0%, 100% 0%, 100% 100%, 80% 100%); }
#clp1:hover,#clp2:hover,#clp3:hover,#clp4:hover,#clp5:hover{z-index:5; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>