Exemple 106

Survol. 9 images au ratio 16/9. Vous pouvez remplacer mes images de fond par les vôtres.

<div style="width:60vw; height:33.75vw; border:0.3vh solid black; margin:1vh auto;">
<p id="fer1" class="fer">&nbsp;</p>
<p id="fer2" class="fer">&nbsp;</p>
<p id="fer3" class="fer">&nbsp;</p>
<p id="fer4" class="fer">&nbsp;</p>
<p id="fer5" class="fer">&nbsp;</p>
<p id="fer6" class="fer">&nbsp;</p>
<p id="fer7" class="fer">&nbsp;</p>
<p id="fer8" class="fer">&nbsp;</p>
<p id="fer9" class="fer">&nbsp;</p>
<p id="pay1" class="pay">&nbsp;</p>
<p id="pay2" class="pay">&nbsp;</p>
<p id="pay3" class="pay">&nbsp;</p>
<p id="pay4" class="pay">&nbsp;</p>
<p id="pay5" class="pay">&nbsp;</p>
<p id="pay6" class="pay">&nbsp;</p>
<p id="pay7" class="pay">&nbsp;</p>
<p id="pay8" class="pay">&nbsp;</p>
<p id="pay9" class="pay">&nbsp;</p>
</div>

<style><!--
.fer{position:absolute; z-index:1; width:10vw; height:11.25vw; border:0.3vh solid black;}
#fer1{box-sizing:border-box; background:url('http://ekladata.com/HGfR3og9XoQZPJSJchvvLUQPcZY/img687.jpg'); transform:translate(0vw,0vw);}
#fer2{box-sizing:border-box; background:url('http://ekladata.com/FSy4tDAzom-Ix22uALO9392uS1U/img692.jpg'); transform:translate(10vw,11.25vw);}
#fer3{box-sizing:border-box; background:url('http://ekladata.com/0ENOgXZqC9bdBebGQGb6QqyaiYE/img694.jpg'); transform:translate(0vw,22.5vw);}
#fer4{box-sizing:border-box; background:url('http://ekladata.com/HGfR3og9XoQZPJSJchvvLUQPcZY/img687.jpg'); transform:translate(20vw,0vw);}
#fer5{box-sizing:border-box; background:url('http://ekladata.com/FSy4tDAzom-Ix22uALO9392uS1U/img692.jpg'); transform:translate(30vw,11.25vw);}
#fer6{box-sizing:border-box; background:url('http://ekladata.com/0ENOgXZqC9bdBebGQGb6QqyaiYE/img694.jpg'); transform:translate(20vw,22.5vw);}
#fer7{box-sizing:border-box; background:url('http://ekladata.com/HGfR3og9XoQZPJSJchvvLUQPcZY/img687.jpg'); transform:translate(40vw,0vw);}
#fer8{box-sizing:border-box; background:url('http://ekladata.com/FSy4tDAzom-Ix22uALO9392uS1U/img692.jpg'); transform:translate(50vw,11.25vw);}
#fer9{box-sizing:border-box; background:url('http://ekladata.com/0ENOgXZqC9bdBebGQGb6QqyaiYE/img694.jpg'); transform:translate(40vw,22.5vw);}
.pay{position:absolute; z-index:1; width:10vw; height:11.25vw;  opacity:0; transition: all 1s linear 1s,opacity 1s linear 0s;}
#pay1{background:url('http://ekladata.com/AHnGlziu925sgG7INS-2FMLgIWM.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
#pay2{background:url('http://ekladata.com/01Eq30FPHCYai_uDHbzOzbmWwg0.jpg'); background-size:60vw 33.75vw; background-position:-10vw -11.25vw; transform:translate(10vw,11.25vw);}
#pay3{background:url('http://ekladata.com/-DK4Za683vvQFeLflrc8RJe0sY0.jpg'); background-size:60vw 33.75vw; background-position:0vw -22.5vw; transform:translate(0vw,22.5vw);}
#pay4{background:url('http://ekladata.com/xXokVRokFaBUoR1EAXkOBEzmTbQ.jpg'); background-size:60vw 33.75vw; background-position:-20vw 0vw; transform:translate(20vw,0vw);}
#pay5{background:url('http://ekladata.com/23rwCYtoVFMVUVpO83fyMe5UsQg.jpg'); background-size:60vw 33.75vw; background-position:-30vw -11.25vw; transform:translate(30vw,11.25vw);}
#pay6{background:url('http://ekladata.com/I0EjOQ_3MB0FdLPv3HpEzgwnVbI.jpg'); background-size:60vw 33.75vw; background-position:-20vw -22.5vw; transform:translate(20vw,22.5vw);}
#pay7{background:url('http://ekladata.com/yRXU1qWZ3XmwLZpywvzRJiasihY.jpg'); background-size:60vw 33.75vw; background-position:-40vw 0vw; transform:translate(40vw,0vw);}
#pay8{background:url('http://ekladata.com/mCmFZBJdlKDLSVTGkqw1zEpFg_c.jpg'); background-size:60vw 33.75vw; background-position:-50vw -11.25vw; transform:translate(50vw,11.25vw);}
#pay9{background:url('http://ekladata.com/3vdxZerOYs0WrrCYB670JDjCU_A.jpg'); background-size:60vw 33.75vw; background-position:-40vw -22.5vw; transform:translate(40vw,22.5vw);}
#pay1:hover,#pay2:hover,#pay3:hover,#pay4:hover,#pay5:hover,#pay6:hover,#pay7:hover,#pay8:hover,#pay9:hover{opacity:1; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
--></style>