Exemple 102

Survolez chaque case sauf celle au centre. 8 images au ratio 16/9.

<div style="width: 60vw; height: 33.75vw; background:url('http://ekladata.com/C5O50MRhwM17yqvz-YmJl9SRfPo.jpg'); background-size:cover; margin: 1vh auto;">
<p id="cas1" class="cas">&nbsp;</p>
<p id="cas2" class="cas">&nbsp;</p>
<p id="cas3" class="cas">&nbsp;</p>
<p id="cas4" class="cas">&nbsp;</p>
<p id="cas5" class="cas">&nbsp;</p>
<p id="cas6" class="cas">&nbsp;</p>
<p id="cas7" class="cas">&nbsp;</p>
<p id="cas8" class="cas">&nbsp;</p>
<p id="cas9" class="cas">&nbsp;</p>

<p id="zer1" class="zer">&nbsp;</p>
<p id="zer2" class="zer">&nbsp;</p>
<p id="zer3" class="zer">&nbsp;</p>
<p id="zer4" class="zer">&nbsp;</p>
<p id="zer6" class="zer">&nbsp;</p>
<p id="zer7" class="zer">&nbsp;</p>
<p id="zer8" class="zer">&nbsp;</p>
<p id="zer9" class="zer">&nbsp;</p>
</div>
<style><!--
.tr{position:absolute; z-index:1;border:0.3vh solid white; width:60vw;}
#tr1{transform:translate(0vw,20vw);}
#tr2{transform:translate(0vw,40vw);}
.cas{position:absolute; z-index:2;width:20vw; height:11.25vw; border:0.3vh solid white;}
#cas1{transform:translate(0vw,0vw);}
#cas2{transform:translate(20vw,0vw);}
#cas3{transform:translate(40vw,0vw);}
#cas4{transform:translate(0vw,11.25vw);}
#cas5{transform:translate(20vw,11.25vw);}
#cas6{transform:translate(40vw,11.25vw);}
#cas7{transform:translate(0vw,22.5vw);}
#cas8{transform:translate(20vw,22.5vw);}
#cas9{transform:translate(40vw,22.5vw);}

.zer{position:absolute; z-index:5; box-sizing:border-box; width:20vw; height:11.25vw; border:0.4vh solid white; background-size:60vw 33.75vw; opacity:0; transition:all 1s linear;}
#zer1{background:url('http://ekladata.com/dqtlCqv_Wfq5fAypS_17py6dzNY.jpg'); background-position:0vw 0vw; transform:translate(0vw,0vw);}
#zer2{background:url('http://ekladata.com/oSctwTOmlhIp5qNVtncHlcvYbrE.jpg'); background-position:-20vw 0vw; transform:translate(20vw,0vw);}
#zer3{background:url('http://ekladata.com/JRaRWjX1LtX7s-dJrggCvffLBok.jpg'); background-position:-40vw 0vw; transform:translate(40vw,0vw);}
#zer4{background:url('http://ekladata.com/2amrUBSiCdEmS1jK9wD9sxjDt_g.jpg'); background-position:0vw -11.25vw; transform:translate(0vw,11.25vw);}
#zer6{background:url('http://ekladata.com/tqnyHO7i7NefrguZcrylvw4pNYw.jpg'); background-position:-40vw -11.25vw; transform:translate(40vw,11.25vw);}
#zer7{background:url('http://ekladata.com/NhysmDfLHe5o47xgrVwlMs8FZEI.jpg'); background-position:0vw -22.5vw; transform:translate(0vw,22.5vw);}
#zer8{background:url('http://ekladata.com/KcFlNWYl5b7BvLI-IdbIE_aYAWQ.jpg'); background-position:-20vw -22.5vw; transform:translate(20vw,22.5vw);}
#zer9{background:url('http://ekladata.com/LSHZwvn_Ygo8fT4ciNV5zRCnxT0.jpg'); background-position:-40vw -22.5vw; transform:translate(40vw,22.5vw);}
#zer1:hover,#zer2:hover,#zer3:hover,#zer4:hover,#zer6:hover,#zer7:hover,#zer8:hover,#zer9:hover{z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; opacity:1; transform:translate(0vw,0vw);}
--></style>