• 30.04.2024

     

    5 images dans un montage en 1000px par 563px (16/9), modifiable à vos dimensions. 

    SURVOL

     

     

     

     

     



    <div style="width: 1000px; height: 563px; margin: 50px auto; text-align: left;">
    <p id="sv">SURVOL</p>
    <p id="ct1">&nbsp;</p>
    <p id="gh1">&nbsp;</p>
    <p id="gb1">&nbsp;</p>
    <p id="dh1">&nbsp;</p>
    <p id="db1">&nbsp;</p>
    </div>

    <style><!--
    #sv{position:absolute; z-index:1; width:150px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(420px,0px);}
    #ct1{box-sizing:border-box; position:absolute; z-index:1; width:300px; height:385px; border:6px ridge gold; background:url('http://ekladata.com/W6xpqsBm8e9ts2LovGcedvrlTTE.jpg'); background-size:1000px 563px; background-position:-350px -75px; transform: translate(350px,75px); transition:all 1s;}
    #gh1{box-sizing:border-box; position:absolute; z-index:1; width:300px; height:260px; border:6px ridge gold; background:url('http://ekladata.com/p_Lob-lujoAG6F92GNHDMFwgWkw.jpg'); background-size:1000px 563px; background-position:-135px -5px;transform-origin:bottom left; transform: translate(135px,5px) perspective(200px) rotatey(15deg); transition:all 1s;}
    #gb1{box-sizing:border-box; position:absolute; z-index:1; width:300px; height:260px; border:6px ridge gold; background:url('http://ekladata.com/_MwsMn0v_RXRWX-mtruSnoVQibs.jpg'); background-size:1000px 563px; background-position:-135px -275px;transform-origin:top left; transform: translate(135px,275px) perspective(200px) rotatey(15deg); transition:all 1s;}
    #dh1{box-sizing:border-box; position:absolute; z-index:1; width:300px; height:260px; border:6px ridge gold; background:url('http://ekladata.com/MLRt1OWgHMrlrh23CQd0-Ml4vTE.jpg'); background-size:1000px 563px; background-position:-565px -5px; transform-origin:bottom right; transform: translate(565px,5px) perspective(200px) rotatey(-15deg); transition:all 1s;}
    #db1{box-sizing:border-box; position:absolute; z-index:1; width:300px; height:260px; border:6px ridge gold; background:url('http://ekladata.com/7ndXR0pt0y90MwtHCLKrdbnoKj0.jpg'); background-size:1000px 563px; background-position:-565px -275px; transform-origin:top right; transform: translate(565px,275px) perspective(200px) rotatey(-15deg); transition:all 1s;}
    #ct1:hover,#gh1:hover, #gb1:hover,#dh1:hover, #db1:hover{z-index:5; width:1000px; height:563px; background-position:0px 0px; transform:translate(0px,0px) perspective(2000px) rotatey(0deg);}
    --></style>