Mont.31.3.23

Toujours en mélangeant des images horizontales et verticales, au ratio 16/9, en 1000x563px et 317x563px.

<div style="width: 1000px; height: 563px; border: 1px solid black; box-shadow: 5px 5px 8px black; margin: 30px auto; text-align: left; background: url('http://ekladata.com/CDIwJewPVAxJCDzS_cTu-7VqevY.jpg'); background-size: cover;">
<p id="fdg" class="fd">&nbsp;</p>
<p id="fdd" class="fd">&nbsp;</p>
<p id="sv">SURVOL</p>
<p id="h1" class="hg">&nbsp;</p>
<p id="h2" class="hg">&nbsp;</p>
<p id="h3" class="hg">&nbsp;</p>
<p id="h4" class="hg">&nbsp;</p>
<p id="v1" class="hg">&nbsp;</p>
<p id="v2" class="hg">&nbsp;</p>
<p id="v3" class="hg">&nbsp;</p>
<p id="v4" class="hg">&nbsp;</p>
</div>
<style><!--
.fd{position:absolute; z-index:1; width:70px; height:563px; background:rgba(0,0,0,0.4);}
#fdg{transform:translate(0px,0px);}
#fdd{transform:translate(930px,0px);}
#sv{position:absolute; z-index:1; width:150px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(100px,20px);}
.hg{position:absolute; z-index:1; width:50px; height:100px; border:4px solid white; transition:all 1s;}
#h1{box-sizing:border-box; background:url('http://ekladata.com/VnI3MhNs3tJ_7WPlVyDWs0dm2AY.jpg'); background-size:1000px 563px; background-position:-10px -30px; transform:translate(10px,30px);}
#h2{box-sizing:border-box; background:url('http://ekladata.com/mxgczY_6ECxkor7gPIcbOoqWAE8.jpg'); background-size:1000px 563px; background-position:-10px -270px; transform:translate(10px,270px);}
#h3{box-sizing:border-box; background:url('http://ekladata.com/8-mKXPMXKMqXUx-zmMpFPO0XCh4.jpg'); background-size:1000px 563px; background-position:-940px -30px; transform:translate(940px,30px);}
#h4{box-sizing:border-box; background:url('http://ekladata.com/wAnB7SEwoqOYwc7O_2BvFG2SOcs.jpg'); background-size:1000px 563px; background-position:-940px -270px; transform:translate(940px,270px);}
#h1:hover,#h2:hover,#h3:hover,#h4:hover{z-index:5; width:1000px; height:563px; background-position:0px 0px; transform:translate(0px,0px);}
.vg{position:absolute; z-index:1; width:50px; height:100px; transition:all 1s;}
#v1{box-sizing:border-box; background:url('http://ekladata.com/U8m0nDOFINBFFcABiakUePCXHuI.jpg'); background-size:317px 563px; background-position:-10px -150px; transform:translate(10px,150px);}
#v2{box-sizing:border-box; background:url('http://ekladata.com/6NkuGJ3EdxhfmAB2j0FfdrbPIZ8.jpg'); background-size:317px 563px; background-position:-10px -390px; transform:translate(10px,390px);}
#v3{box-sizing:border-box; background:url('http://ekladata.com/cS-MvBFK0a7j9ZDdWPFRRXinIcY.jpg'); background-size:317px 563px; background-position:-257px -150px; transform:translate(940px,150px);}
#v4{box-sizing:border-box; background:url('http://ekladata.com/kSD63tNxHzUrqyC4HAf9LyjZw7M.jpg'); background-size:317px 563px; background-position:-257px -390px; transform:translate(940px,390px);}
#v1:hover,#v2:hover{z-index:5; width:317px; height:563px; background-position:0px 0px; transform:translate(0px,0px);}
#v3:hover,#v4:hover{z-index:5; width:317px; height:563px; background-position:0px 0px; transform:translate(683px,0px);}
--></style>