• Mont.01.10.23

    Je ne sais jamais quelle dimension proposer, quel nombre d'images et quel ratio de celles-ci.

    A partir du code proposé, on peut le modifier pour d'autres dimensions et d'autres ratios; pour le nombre d'images, il faudrait le reprendre...

    Ici, 5 images en 1000px x 563px, au ratio 16/9. Survol des 4 angles.

     

     

     

     

     

     

     

     

     


    <div style="width: 1000px; height: 563px; border: 8px ridge white; box-shadow: 4px 4px 8px black; margin: 30px auto; text-align: left; background: url('http://ekladata.com/wAnKqpBe2ggUsEWN-zEAt-NtJGo.jpg'); background-size: cover;">
    <p id="fd1" class="fd">&nbsp;</p>
    <p id="bs1" class="bs">&nbsp;</p>
    <p id="fd2" class="fd">&nbsp;</p>
    <p id="bs2" class="bs">&nbsp;</p>
    <p id="fd3" class="fd">&nbsp;</p>
    <p id="bs3" class="bs">&nbsp;</p>
    <p id="fd4" class="fd">&nbsp;</p>
    <p id="bs4" class="bs">&nbsp;</p>
    </div>
    <style><!--
    .fd{position:absolute; s-index:1; width:1000px; height:563px; background:white;}
    #fd1{clip-path:polygon(0% 0%, 19% 0%, 19% 0%, 0% 34%);}
    #fd2{clip-path:polygon(81% 0%, 100% 0%, 100% 34%, 100% 34%);}
    #fd3{clip-path:polygon(100% 66%, 100% 66%, 100% 100%, 81% 100%);}
    #fd4{clip-path:polygon(0% 66%, 0% 66%, 19% 100%, 0% 100%);}
    .bs{position:absolute; s-index:1; width:1000px; height:563px; transition:all 1s;}
    #bs1{background:url('http://ekladata.com/yajySaPKYZt5a-5A52nWOFzrPG8.jpg'); background-size:1000px 563px; clip-path:polygon(0% 0%, 18% 0%, 18% 0%, 0% 32%);}
    #bs2{background:url('http://ekladata.com/rG_YBSfakS2sMpk0w7YRu7u53EE.jpg'); background-size:1000px 563px; clip-path:polygon(82% 0%, 100% 0%, 100% 32%, 100% 32%);}
    #bs3{background:url('http://ekladata.com/FOnvV1z62Nh2L1xE1CG0teYMRZ8.jpg'); background-size:1000px 563px; clip-path:polygon(100% 68%, 100% 68%, 100% 100%, 82% 100%);}
    #bs4{background:url('http://ekladata.com/KZr-WZQkxlfp6SE9M6KitRw-ZTQ.jpg'); background-size:1000px 563px; clip-path:polygon(0% 68%, 0% 68%, 18% 100%, 0% 100%); }
    #bs1:hover,#bs2:hover,#bs3:hover,#bs4:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
    --></style>


    L'inconvénient de l'utilisation de l'attribut clip-path est qu'il correspond à une découpe au ciseaux, sans bordure.

    J'ai donc ajouté, sous chaque image, un cadre blanc, qui déborder de ces dernières, pour faire comme une bordure.