Art.15.5.21

6 images au ratio 16/9.

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; background: rgba(20,20,20,1);"><input id="chg1" class="chg" type="button" /> <input id="chg2" class="chg" type="button" /> <input id="chg3" class="chg" type="button" /> <input id="chg4" class="chg" type="button" /> <input id="chg5" class="chg" type="button" />
<p id="coup1" class="coup">&nbsp;</p>
<p id="coup2" class="coup">&nbsp;</p>
<p id="coup3" class="coup">&nbsp;</p>
<p id="coup4" class="coup">&nbsp;</p>
<p id="ind">Survol partie de droite pour agrandir; Clic bouton pour changer d'image.</p>
</div>
<style><!--
#ind{position:absolute; z-index:1; width:900px; font-size:20px; color:white; transform:translate(100px,0px);}
.chg{position:absolute; z-index:5; width:15px; height:25px; border-radius:50%;}
#chg1{transform:translate(950px,45px);}
#chg2{transform:translate(950px,145px);}
#chg3{transform:translate(950px,245px);}
#chg4{transform:translate(950px,345px);}
#chg5{transform:translate(950px,445px);}
.coup{position:absolute; z-index:1; width:1000px; height:562px; background:url('http://ekladata.com/QbQlEZz-Q0tEA9PWUJX7AB8iDHs.jpg'); background-size:cover; transition:all 1s linear;}
#coup1{clip-path:polygon(5% 20%, 24% 10%, 20% 85%, 5% 70%);}
#coup2{clip-path:polygon(25% 8%, 45% 15%, 45% 80%, 21% 90%);}
#coup3{clip-path:polygon(46% 8%, 70% 15%, 80% 80%, 46% 70%);}
#coup4{clip-path:polygon(73% 25%, 90% 15%, 85% 80%, 80% 73%);}
 #coup4:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
#chg1:focus ~ #coup1,#chg1:focus ~ #coup2,#chg1:focus ~ #coup3,#chg1:focus ~ #coup4{background:url('http://ekladata.com/KLxPcH5QYz1SEb07xcthBNMUCAQ.jpg'); background-size:cover;}
#chg2:focus ~ #coup1,#chg2:focus ~ #coup2,#chg2:focus ~ #coup3,#chg2:focus ~ #coup4{background:url('http://ekladata.com/7yfSImXIXUHVdzC1d_eUiWBZNcc.jpg'); background-size:cover;}
#chg3:focus ~ #coup1,#chg3:focus ~ #coup2,#chg3:focus ~ #coup3,#chg3:focus ~ #coup4{background:url('http://ekladata.com/3np5D8eVE7H90xLpyrCZ3SXCDl8.jpg'); background-size:cover;}
#chg4:focus ~ #coup1,#chg4:focus ~ #coup2,#chg4:focus ~ #coup3,#chg4:focus ~ #coup4{background:url('http://ekladata.com/qSnDSFP0CvX9_Qxi9rSdg29KIh4.jpg'); background-size:cover;}
#chg5:focus ~ #coup1,#chg5:focus ~ #coup2,#chg5:focus ~ #coup3,#chg5:focus ~ #coup4{background:url('http://ekladata.com/dnVZZ6SwBkHNlDaJ6-J0360Qx28.jpg'); background-size:cover;}
--></style>