• 31.01.2024

    Montage en 800x600px avec 2 images horizontales et 2 images verticales.

    SURVOL

     

     

     

     


    <div style="width: 800px; height: 600px; margin: 30px auto; text-align: left;">
    <p id="par0">SURVOL</p>
    <p id="par1" class="par">&nbsp;</p>
    <p id="par2" class="par">&nbsp;</p>
    <p id="par3" class="par">&nbsp;</p>
    <p id="par4" class="par">&nbsp;</p>
    </div>
    <style><!--
    #par0{position:absolute; z-index:1; width:150px; font-size:30px; transform:translate(330px,10px);}
    .par{position:absolute; z-index:1; width:260px; height:300px; border:4px ridge white; transition:all 1s;}
    #par1{box-sizing:border-box; background:url('http://ekladata.com/HZH0BNs6Bh-OE7XbJ1Veh9orObo.jpg'); background-size:800px 600px; transform:translate(70px,0px) skewx(25deg);}
    #par2{box-sizing:border-box; background:url('http://ekladata.com/9qyV7xcsId1tJs6B8B9lfHXf-FE.jpg'); background-size:800px 600px; background-position:-470px 0px; transform:translate(470px,0px) skewx(-25deg);}
    #par3{box-sizing:border-box; background:url('http://ekladata.com/r8jLqle3SJq9dNNtzrbWy-Ajy8Y.jpg'); background-size:338px 600px; background-position:0px -300px; transform:translate(470px,300px) skewx(25deg);}
    #par4{box-sizing:border-box; background:url('http://ekladata.com/gdZIBYiQgm93VnDkpiXPLorCrYE.jpg'); background-size:338px 600px; background-position:-70px -300px;transform:translate(70px,300px) skewx(-25deg);}
    #par1:hover,#par2:hover{z-index:5; width:800px; height:600px;background-position:0px 0px; transform:translate(0px,0px) skewx(0deg);}
    #par3:hover{z-index:5; width:338px; height:600px;background-position:0px 0px; transform:translate(462px,0px) skewx(0deg);}
    #par4:hover{z-index:5; width:338px; height:600px;background-position:0px 0px; transform:translate(0px,0px) skewx(0deg);}
    --></style>