• Montage 250a

    Montage en 1000 px par 563 px avec 6 images au ratio 16/9 qui affichent la partie de la grande image selon leur position dans le montage.

     

     

     

     

     

     

    <div style="width: 1000px; height: 563px; margin: 5px auto;">
    <p id="sixa1" class="sixa">&nbsp;</p>
    <p id="sixa2" class="sixa">&nbsp;</p>
    <p id="sixa3" class="sixa">&nbsp;</p>
    <p id="sixa4" class="sixa">&nbsp;</p>
    <p id="sixa5" class="sixa">&nbsp;</p>
    <p id="sixa6" class="sixa">&nbsp;</p>
    </div>

    <style><!--
    .sixa{position:absolute; z-index:1; width:160px; height:90px; border:2px solid white; box-shadow:4px 4px 6px black; border-radius:30px; filter:grayscale(1); transition:all 1s linear;}
    #sixa1{background:url('http://ekladata.com/h7cjYzEOXhjAhnwMuQbbxvJwNsA.jpg'); background-size:1000px 563px; background-position:-304px -73px; transform:translate(304px,73px);}
    #sixa2{background:url('http://ekladata.com/Tc8OPQCgEA7pe8EezSWT0KBiGI8.jpg'); background-size:1000px 563px; background-position:-536px -73px; transform:translate(536px,73px);}
    #sixa3{background:url('http://ekladata.com/doJeBg779KLEADE-j9pk2q17aUQ.jpg'); background-size:1000px 563px; background-position:-72px -236px; transform:translate(72px,236px);}
    #sixa4{background:url('http://ekladata.com/WYPSHDCoQJXLwQ3ecNWm3qNdBtE.jpg'); background-size:1000px 563px; background-position:-768px -236px; transform:translate(768px,236px);}
    #sixa5{background:url('http://ekladata.com/keRPo5vdf4JA8CO0Wh57bowaJVA.jpg'); background-size:1000px 563px; background-position:-304px -399px; transform:translate(304px,399px);}
    #sixa6{background:url('http://ekladata.com/NJOwdWJboQTGTlcJBbY1fwcAC60.jpg'); background-size:1000px 563px; background-position:-536px -399px; transform:translate(536px,399px);}
    #sixa1:hover,#sixa2:hover,#sixa3:hover,#sixa4:hover,#sixa5:hover,#sixa6:hover{z-index:5; width:1000px; height:563px; filter:grayscale(0); background-position:0px 0px; transform:translate(0px,0px);}
    --></style>