• Montage 4

    Pour 10 images verticales en 365px de large par 648px de haut.

    Clic maintenu sur chaque vignette.

     

     

     

     

     

     

     

     

     

     


    <div style="width:19vw; height:34vw; margin:1vh auto; border:0.4vh ridge white; box-shadow:0.4vh 0.4vh 0.6vh black; background: radial-gradient(ellipse at center, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);">
    <p id="vl1" class="vl">&nbsp;</p>
    <p id="vl2" class="vl">&nbsp;</p>
    <p id="vl3" class="vl">&nbsp;</p>
    <p id="vl4" class="vl">&nbsp;</p>
    <p id="vl5" class="vl">&nbsp;</p>
    <p id="vl6" class="vl">&nbsp;</p>
    <p id="vl7" class="vl">&nbsp;</p>
    <p id="vl8" class="vl">&nbsp;</p>
    <p id="vl9" class="vl">&nbsp;</p>
    <p id="vl10" class="vl">&nbsp;</p>
    </div>
    <style><!--
    .vl{position:absolute; z-index:1; width:3.5vw; height:6vw; transition:all 1s linear;}
    #vl1{transform:translate(0vw,0.5vw) rotatey(180deg); background:url('http://ekladata.com/ZcN1rnuqNzAQSObExkWeqziybSM.jpg'); background-size:cover;}
    #vl2{transform:translate(0vw,7vw) rotatey(180deg); background:url('http://ekladata.com/NpnqoYV73jXF6wzyw7mEjjYjPqg.jpg'); background-size:cover;}
    #vl3{transform:translate(0vw,13.5vw) rotatey(180deg); background:url('http://ekladata.com/QNo0Nlb-U8xgyxkFyQ8c8MK3zAs.jpg'); background-size:cover;}
    #vl4{transform:translate(0vw,20vw) rotatey(180deg); background:url('http://ekladata.com/dVGjOknZlNa23bpPa-bm5Nz8PrE.jpg'); background-size:cover;}
    #vl5{transform:translate(0vw,27vw) rotatey(180deg); background:url('http://ekladata.com/3_H5ZPPhgyV8CRCoS4vSlmWOXS0.jpg'); background-size:cover;}
    #vl6{transform:translate(15.5vw,0.5vw) rotatey(-180deg); background:url('http://ekladata.com/2sqgIilR14der4raMjxrBDW9pUI.jpg'); background-size:cover;}
    #vl7{transform:translate(15.5vw,7vw) rotatey(-180deg); background:url('http://ekladata.com/Z1miEW6_kTuoPj8kmdXRNG836vY.jpg'); background-size:cover;}
    #vl8{transform:translate(15.5vw,13.5vw) rotatey(-180deg); background:url('http://ekladata.com/L9N0opfeH5zckxa3bp5nCCp--eU.jpg'); background-size:cover;}
    #vl9{transform:translate(15.5vw,20vw) rotatey(-180deg); background:url('http://ekladata.com/iG5ne9TjdJ9SUzkFw7I5W6edVeA.jpg'); background-size:cover;}
    #vl10{transform:translate(15.5vw,27vw) rotatey(-180deg); background:url('http://ekladata.com/-OrQMHS8CruymJXQgZHaSqY09AA.jpg'); background-size:cover;}
    #vl1:active,#vl2:active,#vl3:active,#vl4:active,#vl5:active,#vl6:active,#vl7:active,#vl8:active,#vl9:active,#vl10:active{z-index:10; width:19vw; height:34vw; transform:translate(0vw,0vw) rotatey(0deg);}
    --></style>