• Montage 5

    Toujours selon le même principe et pour montrer que le nombre et la forme des vignettes est à votre convenance.
    Montage en 80vw et code en 60vw; mes photos sont un peu disparate mais seul le principe importe.

     

     

     

     

     

     

     

     

    Clic maintenu.

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge white; background: radial-gradient(ellipse at center, #feccb1 0%,#ef9f77 50%,#ea5507 100%);">
    <p id="el1" class="el">&nbsp;</p>
    <p id="el2" class="el">&nbsp;</p>
    <p id="el3" class="el">&nbsp;</p>
    <p id="el4" class="el">&nbsp;</p>
    <p id="el5" class="el">&nbsp;</p>
    <p id="el6" class="el">&nbsp;</p>
    <p id="el7" class="el">&nbsp;</p>
    <p id="el8" class="el">&nbsp;</p>
    <p id="el9">Clic maintenu.</p>
    </div>

    <style><!--
    .el{position:absolute; z-index:1; width:10vw; height:10vw; transition:all 1s linear;-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}
    #el1{transform:translate(4vw,3vw) rotatey(180deg); background:url('http://ekladata.com/vdKgcVldl81NdhlLPQsnzqZXrC4.jpg'); background-size:60vw 33.75vw;}
    #el2{transform:translate(18vw,3vw) rotatey(180deg); background:url('http://ekladata.com/gn9VZFT13ylQjtYKjTZvkLPq62Q.jpg'); background-size:60vw 33.75vw;}
    #el3{transform:translate(32vw,3vw) rotatey(180deg); background:url('http://ekladata.com/TArr46QuOzWIAHcLVeJSDtcDTL4.jpg'); background-size:60vw 33.75vw;}
    #el4{transform:translate(46vw,3vw) rotatey(180deg); background:url('http://ekladata.com/FKjyyLuwFIqQXEEigG9oZ93ckck.jpg'); background-size:60vw 33.75vw;}
    #el5{transform:translate(4vw,20vw) rotatey(180deg); background:url('http://ekladata.com/dIBvTJtZiAJ80ltq7VUeEIXify0.jpg'); background-size:60vw 33.75vw;}
    #el6{transform:translate(18vw,20vw) rotatey(180deg); background:url('http://ekladata.com/_gxQvUdXuDSIN_jvvDbofPn8A0k.jpg'); background-size:60vw 33.75vw;}
    #el7{transform:translate(32vw,20vw) rotatey(180deg); background:url('http://ekladata.com/79aFYmfpCQGcNq4BltPFByabGww.jpg'); background-size:60vw 33.75vw;}
    #el8{transform:translate(46vw,20vw) rotatey(180deg); background:url('http://ekladata.com/y0KPatdQ6MEb0_vPu1gYscr6zfU.jpg'); background-size:60vw 33.75vw;}
    #el9{position:absolute; z-index:1; width:25vw; text-align:center; font-size:2.5vw; color:#60E1F2; text-shadow:0.1vh 0.1vh black; transform:translate(17vw,14vw);}
    #el1:active,#el2:active,#el3:active,#el4:active,#el5:active,#el6:active,#el7:active,#el8:active{z-index:10;transform:translate(0vw,0vw) rotatey(0deg);width:60vw; height:33.75vw; -webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 35%, 100% 57%, 100% 100%, 50% 100%, 0% 100%, 0% 57%, 0% 35%, 0% 0%);
    clip-path: polygon(50% 0%, 100% 0%, 100% 35%, 100% 57%, 100% 100%, 50% 100%, 0% 100%, 0% 57%, 0% 35%, 0% 0%);}
    --></style>