• Montage 105

    ...

    Clic maintenu sur tomette et navette

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="octo0">Clic maintenu sur tomette et navette</p>
    <p id="octo1" class="octo">&nbsp;</p>
    <p id="octo2" class="octo">&nbsp;</p>
    <p id="octo3" class="octo">&nbsp;</p>
    <p id="octo4" class="octo">&nbsp;</p>
    <p id="octo5" class="octo">&nbsp;</p>
    <p id="octo6" class="octo">&nbsp;</p>
    <p id="octo7">&nbsp;</p>
    <p id="octo8">&nbsp;</p>
    </div>
    <style><!--
    #octo0{position:absolute; z-index:1; width:27vw; border:0.1vh solid black; text-align:center; font-size:1.2vw;transform:translate(15vw,0vw);}
    .octo{position:absolute; z-index:1; width:15vw; height:15vw; -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); transition:all 1s linear;}
    #octo1{transform:translate(8vw,2vw); background:url('http://ekladata.com/xqdngK9MMJ_Ab4cUoOHSXNEPiK8.jpg'); background-size:60vw 33.75vw; background-position:-8vw -2vw;}
    #octo2{transform:translate(23vw,2vw); background:url('http://ekladata.com/Yxo-C0f5v27GlMf60QmFUT0yAkM.jpg'); background-size:60vw 33.75vw; background-position:-23vw -2vw;}
    #octo3{transform:translate(38vw,2vw); background:url('http://ekladata.com/kWzhT7LF66hKTjk1AxTI2_dJQg4.jpg'); background-size:60vw 33.75vw; background-position:-38vw -2vw;}
    #octo4{transform:translate(8vw,17vw); background:url('http://ekladata.com/UCTnxJGEDP8sEpktDm2PjNqWWGk.jpg'); background-size:60vw 33.75vw; background-position:-8vw -17vw;}
    #octo5{transform:translate(23vw,17vw); background:url('http://ekladata.com/mw62ddAUtNuUhD6wYCF8MF6axeM.jpg'); background-size:60vw 33.75vw; background-position:-23vw -17vw;}
    #octo6{transform:translate(38vw,17vw); background:url('http://ekladata.com/bvee7JBWJ_VWgO2LNZGxq7pBUlE.jpg'); background-size:60vw 33.75vw; background-position:-38vw -17vw;}
    #octo7{position:absolute; z-index:1; width:8.7vw; height:8.7vw; background:url('http://ekladata.com/vQKlQNhWFLyGWYx5OxcWARpbyW4.jpg'); background-size:60vw 33.75vw; background-position:-33.65vw -12.65vw; transform:translate(18.65vw,12.65vw); -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transition:all 1s linear;}
    #octo8{position:absolute; z-index:1; width:8.7vw; height:8.7vw; background:url('http://ekladata.com/3wJgI11pwYtJUKIU8HuqWO00xBM.jpg'); background-size:60vw 33.75vw; background-position:-18.65vw -12.65vw; transform:translate(33.65vw,12.65vw); -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);transition:all 1s linear;}
    #octo1:active,#octo2:active,#octo3:active,#octo4:active,#octo5:active,#octo6:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw);-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 100% 70%, 100% 100%, 0% 100%, 0% 70%, 0% 30%); clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 100% 70%, 100% 100%, 0% 100%, 0% 70%, 0% 30%); background-position:0vw 0vw;}
    #octo7:active,#octo8:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw);-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);background-position:0vw 0vw;}
    --></style>