14/9/2023

 1+10 images au ratio 16/9, en 1200x675px.

<div style="width: 1200px; height: 675px; border: 1px solid black; margin: 30px auto; text-align: left; background: url('http://ekladata.com/Emhgz0Ocm8hOwHW0qMNezoC3nKc.jpg'); background-size: cover;">
<p id="mat0">SURVOL</p>
<p id="mat1" class="mat">&nbsp;</p>
<p id="mat2" class="mat">&nbsp;</p>
<p id="mat3" class="mat">&nbsp;</p>
<p id="mat4" class="mat">&nbsp;</p>
<p id="mat5" class="mat">&nbsp;</p>
<p id="mat6" class="mata">&nbsp;</p>
<p id="mat7" class="mata">&nbsp;</p>
<p id="mat8" class="mata">&nbsp;</p>
<p id="mat9" class="mata">&nbsp;</p>
<p id="mat10" class="mata">&nbsp;</p>
</div>
<style><!--
#mat0{position:absolute; z-index:1; width:120px; transform:translate(570px,10px); font-size:25px; color:white; text-shadow:1px 1px black;}
.mat{position:absolute; z-index:1; background-position:0px -100px; background-position:0px -100px; width:120px; height:67.5px; border:4px solid white; transition:width 1s 0s, height 1s 1s, background 1s 1s, margin 1s 1s, transform 1s 0s;}
#mat1{box-sizing:border-box; background:url('http://ekladata.com/tpIppsErK18S-0hFkitfcDDY2zY.jpg'); background-size:1200px 675px; background-position:0px -100px; transform:translate(0px,0px); margin-top:100px}
#mat2{box-sizing:border-box; background:url('http://ekladata.com/CiPOeKpL_1B7qJX_3ujkzXPIvlw.jpg'); background-size:1200px 675px; background-position:0px -200px; transform:translate(0px,0px); margin-top:200px}
#mat3{box-sizing:border-box; background:url('http://ekladata.com/mtSA2j4zDtpSg1PD5aCiwlmOc70.jpg'); background-size:1200px 675px; background-position:0px -300px; transform:translate(0px,0px); margin-top:300px}
#mat4{box-sizing:border-box; background:url('http://ekladata.com/6CleSyo8nQKBaIMMsDnpobHXkEw.jpg'); background-size:1200px 675px; background-position:0px -400px; transform:translate(0px,0px); margin-top:400px}
#mat5{box-sizing:border-box; background:url('http://ekladata.com/3lfdZnjvF26oYBcOd1Apa-8grD8.jpg'); background-size:1200px 675px; background-position:0px -500px; transform:translate(0px,0px); margin-top:500px}
#mat1:hover,#mat2:hover,#mat3:hover,#mat4:hover,#mat5:hover,#mat6:hover{z-index:10; width:1200px; height:675px; background-position:0px 0px; margin-top:0px; transform:translate(0px,0px);}

.mata{position:absolute; z-index:1; width:120px; height:67.5px; border:4px solid white; transition:width 1s 1s, height 1s 0s, background 1s 1s, margin 1s 0s, transform 1s 1s;}
#mat6{width:120px; height:67.5px; box-sizing:border-box; background:url('http://ekladata.com/zZ_7aW0L9Ik3XZP_0NNvRS2dnaA.jpg'); background-size:1200px 675px; background-position:-1080px 0px; transform:translate(1080px,0px); margin-top:100px;}
#mat7{width:120px; height:67.5px; box-sizing:border-box; background:url('http://ekladata.com/JeSH-g418zyMP19tJWgPHPSuUr0.jpg'); background-size:1200px 675px; background-position:-1080px 0px; transform:translate(1080px,0px); margin-top:200px;}
#mat8{width:120px; height:67.5px; box-sizing:border-box; background:url('http://ekladata.com/uQnfev8frtK8WNIjztCzfenB82M.jpg'); background-size:1200px 675px; background-position:-1080px 0px; transform:translate(1080px,0px); margin-top:300px;}
#mat9{width:120px; height:67.5px; box-sizing:border-box; background:url('http://ekladata.com/nNAL-sEi9Va3nvyno3dbR61_do0.jpg'); background-size:1200px 675px; background-position:-1080px 0px; transform:translate(1080px,0px); margin-top:400px;}
#mat10{width:120px; height:67.5px; box-sizing:border-box; background:url('http://ekladata.com/SpHNDkugEyUXjlUv0_QOzzSBLQ8.jpg'); background-size:1200px 675px; background-position:-1080px 0px;
transform:translate(1080px,0px); margin-top:500px;}
#mat6:hover,#mat7:hover,#mat8:hover,#mat9:hover,#mat10:hover{z-index:10; width:1200px; height:675px; background-position:0px 0px; margin-top:0px; transform:translate(0px,0px);}
--></style>