• Montage 73

     

    Survol cadre mauve puis clic maintenu.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; margin: 1vh auto; background: url('http://ekladata.com/M6fjr97Wyz3YEM0pE1suIVq65Ws.jpg'); background-size: cover;">
    <p id="cc">Survol cadre mauve puis clic maintenu.</p>
    <p id="cad1" class="cad">&nbsp;</p>
    <p id="cad2" class="cad">&nbsp;</p>
    <p id="cad3" class="cad">&nbsp;</p>
    <p id="cad4" class="cad">&nbsp;</p>
    <p id="cad5" class="cad">&nbsp;</p>
    <p id="cad6" class="cad">&nbsp;</p>
    <p id="cad7" class="cad">&nbsp;</p>
    <p id="cad8" class="cad">&nbsp;</p>
    <p id="mg1" class="mg">&nbsp;</p>
    <p id="mg2" class="mg">&nbsp;</p>
    <p id="mg3" class="mg">&nbsp;</p>
    <p id="mg4" class="mg">&nbsp;</p>
    <p id="mg5" class="mg">&nbsp;</p>
    <p id="mg6" class="mg">&nbsp;</p>
    <p id="mg7" class="mg">&nbsp;</p>
    <p id="mg8" class="mg">&nbsp;</p>
    </div>

    <style><!--
    #cc{position:absolute; z-index:1; width:45vw; background:rgba(0,0,0,0.5); text-align:center; font-size:2vw; color:white; text-shadow:0.2vh 0.2vh black; transform:translate(7.5vw,30vw);}
    .cad{position:absolute; z-index:1; width:4vw; height:4vw; border-radius:50%; border:0.3vw solid purple;}
    #cad1{box-sizing:border-box; transform:translate(2vw,3vw);}
    #cad2{box-sizing:border-box;transform:translate(8vw,3vw);}
    #cad3{box-sizing:border-box;transform:translate(14vw,3vw);}
    #cad4{box-sizing:border-box; transform:translate(20vw,3vw);}
    #cad5{box-sizing:border-box;transform:translate(26vw,3vw);}
    #cad6{box-sizing:border-box;transform:translate(32vw,3vw);}
    #cad7{box-sizing:border-box;transform:translate(38vw,3vw);}
    #cad8{box-sizing:border-box;transform:translate(44vw,3vw);}
    .mg{position:absolute; z-index:2; opacity:0; width:4vw; height:4vw; border-radius:50%; transition:opacity 0.2s linear, transform 1s linear, width 1s linear, height 1s linear, background 1s linear, border-radius 1s linear;}
    #mg1{ background:url('http://ekladata.com/OWmyNRYuQSOkPFRoaVUgdushf34.jpg'); background-size:60vw 33.75vw; background-position:-2vw -3vw; transform:translate(2vw,3vw);}
    #mg2{background:url('http://ekladata.com/kqWmrxguY2LQVlfDbrcGRCF1byc.jpg'); background-size:60vw 33.75vw; background-position:-8vw -3vw; transform:translate(8vw,3vw);}
    #mg3{background:url('http://ekladata.com/vlqx6i_8q49mmzGhfN-ZgnqGfKQ.jpg'); background-size:60vw 33.75vw; background-position:-14vw -3vw; transform:translate(14vw,3vw);}
    #mg4{ background:url('http://ekladata.com/43udb5hw_nEKbfhn-Mwn4gHf2jc.jpg'); background-size:60vw 33.75vw; background-position:-20vw -3vw; transform:translate(20vw,3vw);}
    #mg5{background:url('http://ekladata.com/XZJO63d6ILX9aOCsrLqmvzgLA5U.jpg'); background-size:60vw 33.75vw; background-position:-26vw -3vw; transform:translate(26vw,3vw);}
    #mg6{background:url('http://ekladata.com/8QlL135LBUs1_2NCQbJYdfGnmNI.jpg'); background-size:60vw 33.75vw; background-position:-32vw -3vw; transform:translate(32vw,3vw);}
    #mg7{background:url('http://ekladata.com/5kDLCo3QOZi4IeSnX1o8KJD3dGk.jpg'); background-size:60vw 33.75vw; background-position:-38vw -3vw; transform:translate(38vw,3vw);}
    #mg8{background:url('http://ekladata.com/kIF2_xYLUns3FUSXkDge3snTDJ0.jpg'); background-size:60vw 33.75vw; background-position:-44vw -3vw; transform:translate(44vw,3vw);}
    #mg1:hover,#mg2:hover,#mg3:hover,#mg4:hover,#mg5:hover,#mg6:hover,#mg7:hover,#mg8:hover{opacity:1;}
    #mg1:active,#mg2:active,#mg3:active,#mg4:active,#mg5:active,#mg6:active,#mg7:active,#mg8:active{z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw); border-radius:0%;}
    --></style>