• Montage 308

     7 images au ratio 16/9. On peut facilement ajouter une bordure et un fond au montage.

     

     

     

     

     

     

     

    Survol

    <div style="width: 900px; height: 506px; margin: 5px auto; text-align: left;">
    <p id="mart1" class="mart">&nbsp;</p>
    <p id="mart2" class="mart">&nbsp;</p>
    <p id="mart3" class="mart">&nbsp;</p>
    <p id="mart4" class="mart">&nbsp;</p>
    <p id="mart5" class="mart">&nbsp;</p>
    <p id="mart6" class="mart">&nbsp;</p>
    <p id="mart7" class="mart">&nbsp;</p>
    <p id="mart0">Survol</p>
    </div>
    <style><!--
    #mart0{position:absolute; z-index:1; width:110px; font-size:30px; transform:translate(40px,50px) rotate(55deg);}
    .mart{position:absolute; z-index:1; width:900px; height:506px; filter:grayscale(1); transition:all 1s linear 0s, filter 1s linear 1s;}
    #mart1{background:url('http://ekladata.com/Anm5ZiBdtkX0jQ-yB4L-pH4wMIs.jpg'); background-size:900px 506px; clip-path:polygon(0% 0%, 20% 50%, 20% 50%,0% 100%);}
    #mart2{background:url('http://ekladata.com/0by8a3N5Z_nGpXFa6Dg12ppiwL8.jpg'); background-size:900px 506px; clip-path:polygon(10% 0%, 40% 0%, 25% 40%,25% 40%);}
    #mart3{background:url('http://ekladata.com/C_ENMMFJwDF5VE8-yTVkzkeD4VA.jpg'); background-size:900px 506px; clip-path:polygon(25% 60%, 25% 60%, 40% 100%,10% 100%);}
    #mart4{background:url('http://ekladata.com/O4Z5d1ZFl_foEZ9Gv6Xsodq8hGo.jpg'); background-size:900px 506px; clip-path:polygon(50% 0%, 70% 50%, 50% 100%,30% 50%);}
    #mart5{background:url('http://ekladata.com/VXVpWNI6GzUfAShuGOXi-ThDmto.jpg'); background-size:900px 506px; clip-path:polygon(60% 0%, 90% 0%, 75% 40%,75% 40%);}
    #mart6{background:url('http://ekladata.com/elzljdFTNN_ZKSbA5RD4_voUiv4.jpg'); background-size:900px 506px; clip-path:polygon(75% 60%, 75% 60%, 90% 100%,60% 100%);}
    #mart7{background:url('http://ekladata.com/b1Pyqwh4OnVNkUV2L1F6kZnVnMo.jpg'); background-size:900px 506px; clip-path:polygon(80% 50%, 100% 0%, 100% 100%,80% 50%);}
    #mart1:hover,#mart2:hover,#mart3:hover,#mart4:hover,#mart5:hover,#mart6:hover,#mart7:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); filter:grayscale(0);}
    --></style>