Exemple 205

8 + 1 images au ratio 16/9 

<div style="width: 1000px; height: 563px; margin: 5px auto; border: 1px solid black; background: url('http://ekladata.com/e_Z3WuJ4MdI4X9gsK4YJQU7ZsvM.jpg'); background-size: cover;">
<p id="exp">Survol 8 parties de l'encadrement.</p>
<p id="ent1" class="ent">&nbsp;</p>
<p id="ent2" class="ent">&nbsp;</p>
<p id="ent3" class="ent">&nbsp;</p>
<p id="ent4" class="ent">&nbsp;</p>
<p id="ent5" class="ent">&nbsp;</p>
<p id="ent6" class="ent">&nbsp;</p>
<p id="ent7" class="ent">&nbsp;</p>
<p id="ent8" class="ent">&nbsp;</p>
</div>

<style><!--
#exp{position:absolute; z-index:1; width:500px; font-size:30px; color:lime; text-shadow:2px 2px black; transform:translate(100px,50px);}
.ent{position:absolute; z-index:1; border:4px solid white; transition:all 1s linear;}
#ent1{box-sizing:border-box; width:80px; height:80px; background:url('http://ekladata.com/woFoY889PHpqyQLkMYlEY73hKNI.jpg'); background-size:1000px 563px; background-position:0px 0px; transform:translate(0px,0px);}
#ent2{box-sizing:border-box; width:80px; height:80px; background:url('http://ekladata.com/hresQP7Pqos1kSNK_fJZ9YYhWtQ.jpg'); background-size:1000px 563px; background-position:-920px 0px; transform:translate(920px,0px);}
#ent3{box-sizing:border-box; width:80px; height:80px; background:url('http://ekladata.com/uZSxCpnvO5ToX5K0EFbcM6L8Ngk.jpg'); background-size:1000px 563px; background-position:-920px -483px; transform:translate(920px,483px);}
#ent4{box-sizing:border-box; width:80px; height:80px; background:url('http://ekladata.com/fz4QV3noAcjMQ-XYZHV2GNc0psY.jpg'); background-size:1000px 563px; background-position:0px -483px; transform:translate(0px,483px);}
#ent5{box-sizing:border-box; width:840px; height:40px; background:url('http://ekladata.com/FKXfoxqSWPV7rd2ziDPxV_vLMxs.jpg'); background-size:1000px 563px; background-position:-80px 0px; transform:translate(80px,0px);}
#ent6{box-sizing:border-box; width:40px; height:403px; background:url('http://ekladata.com/LUmjGxkk6Cdd4741lIpcNrBMTnU.jpg'); background-size:1000px 563px; background-position:-960px -80px; transform:translate(960px,80px);}
#ent7{box-sizing:border-box; width:840px; height:40px; background:url('http://ekladata.com/UbIJ3HKR0cFM_3wyNoPZ4DtJebs.jpg'); background-size:1000px 563px; background-position:-80px -523px; transform:translate(80px,523px);}
#ent8{box-sizing:border-box; width:40px; height:403px; background:url('http://ekladata.com/cD0Rp047m0kKOaP7iszJlwC-b18.jpg'); background-size:1000px 563px; background-position:0px -80px; transform:translate(0px,80px);}
#ent1:hover,#ent2:hover,#ent3:hover,#ent4:hover,#ent5:hover,#ent6:hover,#ent7:hover,#ent8:hover{z-index:5; width:1000px; height:563px; background-position:0px 0px;transform:translate(0px,0px);}
--></style>