• Montage 7

    Eclipse ! Montage en 80vw et code en 60vw.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    Clic maintenu.

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge white; background: #829d98;">
    <p id="el1" class="el">&nbsp;</p>
    <p id="sol1" class="sol">&nbsp;</p>
    <p id="el2" class="el">&nbsp;</p>
    <p id="sol2" class="sol">&nbsp;</p>
    <p id="el3" class="el">&nbsp;</p>
    <p id="sol3" class="sol">&nbsp;</p>
    <p id="el4" class="el">&nbsp;</p>
    <p id="sol4" class="sol">&nbsp;</p>
    <p id="el5" class="el">&nbsp;</p>
    <p id="sol5" class="sol">&nbsp;</p>
    <p id="el6" class="el">&nbsp;</p>
    <p id="sol6" class="sol">&nbsp;</p>
    <p id="el7" class="el">&nbsp;</p>
    <p id="sol7" class="sol">&nbsp;</p>
    <p id="el8" class="el">&nbsp;</p>
    <p id="sol8" class="sol">&nbsp;</p>
    <p id="lune">Clic maintenu.</p>
    </div>

    <style><!--
    #lune{position:absolute; z-index:1; width:20vw; transform:translate(20vw,31vw); text-align:center; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black;}
    .el{position:absolute; z-index:1; width:10vw; height:10vw; border-radius:50%; transition:all 1s linear;}
    .sol{position:absolute; z-index:2; width:9vw; height:9vw; border-radius:50%; background:#829d98; transition:all 1s linear;}
    #el1{transform:translate(3vw,3vw); background:url('http://ekladata.com/jTFK39u4L3SumQStytmq0H1f1c0.jpg'); background-size:60vw 33.75vw;}
    #sol1{transform:translate(1vw,3.5vw);}
    #el2{transform:translate(16vw,3vw); background:url('http://ekladata.com/nddPhNp4UGkblwz3r0JPWUmCVVY.jpg'); background-size:60vw 33.75vw;}
    #sol2{transform:translate(13vw,3.5vw);}
    #el3{transform:translate(30vw,3vw); background:url('http://ekladata.com/Rd0MJhbSGUoHhjO09Hyd8RDR3mY.jpg'); background-size:60vw 33.75vw;}
    #sol3{transform:translate(26vw,3.5vw);}
    #el4{transform:translate(48vw,3vw); background:url('http://ekladata.com/VKOdW79sTo48CLOMi2UqZN4aDh0.jpg'); background-size:50vw 33.75vw;}
    #sol4{transform:translate(40vw,3.5vw);}
    #el5{transform:translate(2vw,17vw); background:url('http://ekladata.com/mRPLHglSJIUSbAYyr44wcNmnBNM.jpg'); background-size:60vw 33.75vw;}
    #sol5{transform:translate(4.5vw,17.5vw);}
    #el6{transform:translate(14vw,17vw); background:url('http://ekladata.com/q-tKJoHEmByW39SogTw3S9_cDEo.jpg'); background-size:60vw 33.75vw;}
    #sol6{transform:translate(17vw,17.5vw);}
    #el7{transform:translate(27vw,17vw); background:url('http://ekladata.com/eQWtADhjHlhqhevIqdLgyHlUPUo.jpg'); background-size:60vw 33.75vw;}
    #sol7{transform:translate(31vw,17.5vw);}
    #el8{transform:translate(41vw,17vw); background:url('http://ekladata.com/VL0qEd3cZbsbu8CBwc9vw283GqU.jpg'); background-size:60vw 33.75vw;}
    #sol8{transform:translate(49vw,17.5vw);}
    #el1:active,#el2:active,#el3:active,#el4:active,#el5:active,#el6:active,#el7:active,#el8:active{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw); border-radius:0%;}
    #el1:active ~ #sol1,#el2:active ~ #sol2,#el3:active ~ #sol3,#el4:active ~ #sol4,#el5:active ~ #sol5, #el6:active ~ #sol6,#el7:active ~ #sol7,#el8:active ~ #sol8{width:0vw; height:0vw;}
    --></style>