-
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"> </p>
<p id="cad2" class="cad"> </p>
<p id="cad3" class="cad"> </p>
<p id="cad4" class="cad"> </p>
<p id="cad5" class="cad"> </p>
<p id="cad6" class="cad"> </p>
<p id="cad7" class="cad"> </p>
<p id="cad8" class="cad"> </p>
<p id="mg1" class="mg"> </p>
<p id="mg2" class="mg"> </p>
<p id="mg3" class="mg"> </p>
<p id="mg4" class="mg"> </p>
<p id="mg5" class="mg"> </p>
<p id="mg6" class="mg"> </p>
<p id="mg7" class="mg"> </p>
<p id="mg8" class="mg"> </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>