• Montage 250

     Montage de 1000px par 563px avec 6 images au ratio 16/9 à survoler.

     

     

     

     

     

     

    <div style="width: 1000px; height: 563px; margin: 5px auto;">
    <p id="six1" class="six">&nbsp;</p>
    <p id="six2" class="six">&nbsp;</p>
    <p id="six3" class="six">&nbsp;</p>
    <p id="six4" class="six">&nbsp;</p>
    <p id="six5" class="six">&nbsp;</p>
    <p id="six6" class="six">&nbsp;</p>
    </div>

    <style><!--
    .six{position:absolute; z-index:1; width:160px; height:90px; border:3px solid white; box-shadow:4px 4px 6px black; border-radius:30px; transition:all 1s linear;}
    #six1{background:url('http://ekladata.com/h7cjYzEOXhjAhnwMuQbbxvJwNsA.jpg'); background-size:cover; transform:translate(304px,73px);}
    #six2{background:url('http://ekladata.com/Tc8OPQCgEA7pe8EezSWT0KBiGI8.jpg'); background-size:cover; transform:translate(536px,73px);}
    #six3{background:url('http://ekladata.com/doJeBg779KLEADE-j9pk2q17aUQ.jpg'); background-size:cover; transform:translate(72px,236px);}
    #six4{background:url('http://ekladata.com/WYPSHDCoQJXLwQ3ecNWm3qNdBtE.jpg'); background-size:cover; transform:translate(768px,236px);}
    #six5{background:url('http://ekladata.com/keRPo5vdf4JA8CO0Wh57bowaJVA.jpg'); background-size:cover; transform:translate(304px,399px);}
    #six6{background:url('http://ekladata.com/NJOwdWJboQTGTlcJBbY1fwcAC60.jpg'); background-size:cover; transform:translate(536px,399px);}
    #six1:hover,#six2:hover,#six3:hover,#six4:hover,#six5:hover,#six6:hover{z-index:5; width:1000px; height:563px; transform:translate(0px,0px);}
    --></style>