• Mont.27.10.23

    4+1 images au ratio 16/9, en 1200x675px. Modifiable à d'autres nombre d'images, d'autres tailles d'images et d'autres ratios.

    Survol des onglets latéraux.

     

     

     

     


    <div style="width: 1200px; height: 675px; margin: 30px auto; text-align: left; border: 4px ridge white; box-shadow:4px 4px 8px black; background: url('http://ekladata.com/71xjKSG_ysxJMto0XX4eRlsqVvE.jpg'); background-size: cover;">
    <p id="fd1" class="fd">&nbsp;</p>
    <p id="fd2" class="fd">&nbsp;</p>
    <p id="fd3" class="fd">&nbsp;</p>
    <p id="fd4" class="fd">&nbsp;</p>
    </div>

    <style><!--
    .fd{position:absolute; z-index:1; width:550px; height:330px; border:4px solid white; transition:all 1s;}
    #fd1{box-sizing:border-box; background:url('http://ekladata.com/6zpKf750FLi1lvW3VozTOBcIR44.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(0px,0px) perspective(200px) rotatey(70deg); transform-origin:center left;}
    #fd2{box-sizing:border-box; background:url('http://ekladata.com/ojS08o-fL5xgsom0-PFAGjPJ2AE.jpg'); background-size:1200px 675px; background-position:0px -345px; transform:translate(0px,345px) perspective(200px) rotatey(70deg); transform-origin:center left;}
    #fd3{box-sizing:border-box; background:url('http://ekladata.com/Y_tIwA9gxCzWalgBYETY_ZI7gec.jpg'); background-size:1200px 675px; background-position:-650px 0px; transform:translate(650px,0px) perspective(200px) rotatey(-70deg); transform-origin:center right;}
    #fd4{box-sizing:border-box; background:url('http://ekladata.com/_Io3hSg8aNrwbnCwjemAHgwaSlY.jpg'); background-size:1200px 675px; background-position:-650px -345px; transform:translate(650px,345px) perspective(200px) rotatey(-70deg); transform-origin:center right;}
    #fd1:hover,#fd2:hover,#fd3:hover,#fd4:hover{z-index:5; width:1200px; height:675px; background-position:0px 0px;transform:translate(0px,0px) perspective(2000px) rotatey(0deg);}
    --></style>