• 12.05.2024

    Montage en 1100px par 609px (16/9) avec deux images verticales et 3 horizontales.

    Clic maintenu.

     

     

     

     

     


    <div style="width: 1100px; height: 619px; margin: 50px auto;">
    <p id="cm">Clic maintenu.</p>
    <p id="fm1" class="fm">&nbsp;</p>
    <p id="fm2" class="fm">&nbsp;</p>
    <p id="fm3" class="fm">&nbsp;</p>
    <p id="fv1" class="fv">&nbsp;</p>
    <p id="fv2" class="fv">&nbsp;</p>
    </div>
    <style><!--
    #cm{position:absolute; width:250px; font-size:25px; transform:translate(425px,10px);}
    .fm{position:absolute; border-radius: 50% 20% / 10% 40%; box-shadow:inset 6px 6px 8px black, inset -6px -6px 8px white; transition:all 1s;}
    #fm1{width:800px; height:450px; transform:translate(150px,85px); background:url('http://ekladata.com/u9udOgRkpkdjw-pGEHasWq7qkKQ.jpg'); background-size:1100px 619px; background-position:-150px -85px;}
    #fm2{width:700px; height:390px; transform:translate(200px,115px); background:url('http://ekladata.com/J09alfWTvct32SwtlKykTNL2D4Y.jpg'); background-size:1100px 619px; background-position:-200px -115px;}
    #fm3{width:600px; height:338px; transform:translate(250px,140px); background:url('http://ekladata.com/0a5SA595-bYhHDzIQjH4Ok97aAA.jpg'); background-size:1100px 619px; background-position:-250px -140px;}
    .fv{position:absolute; border-radius: 50% 20% / 10% 40%; box-shadow:inset 6px 6px 8px black, inset -6px -6px 8px white; transition:all 1s;}
    #fv1{width:140px; height:250px; transform:translate(330px,180px); background:url('http://ekladata.com/7iY9BF_AQJ0j7eO2tfVsxelkndA.jpg'); background-size:338px 619px; background-position:-70px -180px;}
    #fv2{width:140px; height:250px; transform:translate(600px,180px); background:url('http://ekladata.com/pg6SE413u59NMVsGVZSmVPnbEgo.jpg'); background-size:338px 619px; background-position:-120px -180px;}
    #fm1:active,#fm2:active,#fm3:active{z-index:10; width: 1100px; height: 619px; border-radius:100px; transform:translate(0px,0px); background-position:0px 0px;}
    #fv1:active{z-index:10; width: 338px; height: 619px; border-radius:80px; transform:translate(260px,0px); background-position:0px 0px;}
    #fv2:active{z-index:10; width: 338px; height: 619px; border-radius:80px; transform:translate(480px,0px);background-position:0px 0px; }
    --></style>