• Orthorexique 4

    Terminons la série par le montage demandé, avec 3 images et en 900px de large par 506px de haut (16/9)

    Le nombre d'images peut être modifié et les dimensions du montage également.

    Clic maintenu sur chaque section d'image.

     

     

     



    <div style="width: 900px; height: 506px; margin: 2px auto;">
    <p id="ort1">&nbsp;</p>
    <p id="ort2">&nbsp;</p>
    <p id="ort3">&nbsp;</p>
    </div>

    <style><!--
    #ort1{position:absolute; z-index:1; box-sizing:border-box; width:300px; height:506px; border:5px ridge white; background:url('http://ekladata.com/zIOsaGuR96g5vHMWtiiHiOmmlZE@900x506.jpg'); background-size:900px 506px; transform:translate(0px,0px); background-position:0px 0px; transition:all 1s linear;}
    #ort2{position:absolute; z-index:1; box-sizing:border-box; width:300px; height:506px; border:5px ridge white; background:url('http://ekladata.com/EFAFm-lWXeB6AWJgsouM9z21GZo@900x506.jpg'); background-size:900px 506px; transform:translate(300px,0px); background-position:-300px 0px; transition:all 1s linear;}
    #ort3{position:absolute; z-index:1; box-sizing:border-box; width:300px; height:506px; border:5px ridge white; background:url('http://ekladata.com/kjBAqLJESKbpagrOjQqn_eg97ZI@900x506.jpg'); background-size:900px 506px; transform:translate(600px,0px); background-position:-600px 0px; transition:all 1s linear;}
    #ort1:hover,#ort2:hover,#ort3:hover{z-index:10;}
    #ort1:active,#ort2:active,#ort3:active{width:900px; background-position:0px 0px;transform:translate(0px,0px);}
    --></style>



     

    Remplacez la partie en rouge de mes adresses d'images par les vôtres.

    Si vous souhaitez une nombre d'images différents et des dimensions différentes et que vous n'y arriviez pas, merci de me contacter.