Montage 331

 6 boutons invisibles qui, survolés, ouvrent chacun une image au ratio 16/9; bonne recherche !

<div style="width: 900px; height: 506px; margin: 5px auto; border: 1px solid black; text-align: left; background: url('http://ekladata.com/Ri6OcxAu-qctGmN08Ci6urLwt2c@900x506.jpg'); background-size: cover;">
<p id="cv">On peut utiliser des boutons invisibles pour faire comme un jeu de d&eacute;couverte pour ouvrir des images cach&eacute;es, dans un montage.<br />D&eacute;placez votre curseur dans ce montage pour faire appara&icirc;tre 6 images.</p>
<p id="bt1" class="bt">&nbsp;</p>
<p id="bt2" class="bt">&nbsp;</p>
<p id="bt3" class="bt">&nbsp;</p>
<p id="bt4" class="bt">&nbsp;</p>
<p id="bt5" class="bt">&nbsp;</p>
<p id="bt6" class="bt">&nbsp;</p>
<p id="btf1" class="btf">&nbsp;</p>
<p id="btf2" class="btf">&nbsp;</p>
<p id="btf3" class="btf">&nbsp;</p>
<p id="btf4" class="btf">&nbsp;</p>
<p id="btf5" class="btf">&nbsp;</p>
<p id="btf6" class="btf">&nbsp;</p>
</div>

<style><!--
#cv{position:absolute; z-index:1; width:100px; height:506px; text-align:center; font-size:15px; transform:translate(800px,0px); background-color:rgba(255,255,255,0.5);}
.bt{position:absolute; z-index:5; width:40px; height:40px; border-radius:50%;}
#bt1{transform:translate(10px,10px);}
#bt2{transform:translate(700px,80px);}
#bt3{transform:translate(200px,350px);}
#bt4{transform:translate(450px,250px);}
#bt5{transform:translate(600px,400px);}
#bt6{transform:translate(400px,450px);}
.btf{position:absolute; z-index:2; width:0px; height:0px; transition:all 1s linear;}
#btf1{background:url('http://ekladata.com/P6zzXDEfHDi9578vdCqudcndv8A@900x506.jpg'); background-position:-30px -30px; transform:translate(30px,30px); }
#btf2{background:url('http://ekladata.com/y0k44y7KDi81ouzBTU-pp0E8SbQ@900x506.jpg'); background-position:-720px -100px; transform:translate(720px,100px);}
#btf3{background:url('http://ekladata.com/Rhwcv8EsTJ18uRLT92XHsbjKU8U@900x506.jpg'); background-position:-220px -370px; transform:translate(220px,370px);}
#btf4{background:url('http://ekladata.com/js5sykwYRyD8XzWvB7lFyHSg2MI@900x506.jpg'); background-position:-470px -270px; transform:translate(470px,270px);}
#btf5{background:url('http://ekladata.com/0DyrAugizk5iDKIMj7-vyg5LiVI@900x506.jpg'); background-position:-620px -420px; transform:translate(620px,420px);}
#btf6{background:url('http://ekladata.com/jYjhMBjQd1O5OteiM3z79gRaI6k@900x506.jpg'); background-position:-420px -470px; transform:translate(420px,470px);}
#bt1:hover ~ #btf1,#bt2:hover ~ #btf2,#bt3:hover ~ #btf3,#bt4:hover ~ #btf4,#bt5:hover ~ #btf5,#bt6:hover ~ #btf6{z-index:4; width:900px; height:506px; background-position:0px 0px; transform:translate(0px, 0px);}
--></style>