• Montage 18

     

    Survol

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge white; background: url('http://ekladata.com/lPS4bBUzSh9dUgVnmNFBGfa5nwM.jpg'); background-size: cover;">
    <p id="ex">Survol</p>
    <p id="bt1" class="bt">&nbsp;</p>
    <p id="bt2" class="bt">&nbsp;</p>
    <p id="bt3" class="bt">&nbsp;</p>
    <p id="bt4" class="bt">&nbsp;</p>
    <p id="bt5" class="bt">&nbsp;</p>
    <p id="bt6" class="bt">&nbsp;</p>
    <p id="bt7" class="bt">&nbsp;</p>
    <p id="bt8" class="bt">&nbsp;</p>
    <p id="bt9" class="bt">&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>
    <p id="mg9" class="mg">&nbsp;</p>
    </div>
    <style><!--
    #ex{position:absolute; z-index:1; width:6vw; background:rgba(0,0,0,0.5); font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(74vw,0vw);}
    .bt{position:absolute; z-index:10; width:1.5vw; height:1.5vw; border-radius:50%; border:0.2vh solid black; background:linear-gradient(to bottom,rgba(0,100,100,1) 0%, rgba(0,255,0,1) 100%);}
    #bt1{transform:translate(57vw,2vw);}
    #bt2{transform:translate(57vw,5vw);}
    #bt3{transform:translate(57vw,8vw);}
    #bt4{transform:translate(57vw,11vw);}
    #bt5{transform:translate(57vw,14vw);}
    #bt6{transform:translate(57vw,17vw);}
    #bt7{transform:translate(57vw,20vw);}
    #bt8{transform:translate(57vw,23vw);}
    #bt9{transform:translate(57vw,26vw);}
    .mg{position:absolute; z-index:1; width:40vw; height:15vw; transform:translate(10vw,9vw) rotatey(90deg); transition:all 1s linear;}
    #mg1{background:url('http://ekladata.com/E4CgGX22CkosZCKCaVEZJqA02QY.jpg'); background-size:cover;}
    #mg2{background:url('http://ekladata.com/avrN6HXRDFXfa8QyPgZQnEIF8d4.jpg'); background-size:cover;}
    #mg3{background:url('http://ekladata.com/nJl54iQVop7IDHjhqS3DqYdjSKY.jpg'); background-size:cover;}
    #mg4{background:url('http://ekladata.com/ZvosPdaoqF1XKtpZtEYL-8sepIk.jpg'); background-size:cover;}
    #mg5{background:url('http://ekladata.com/ov1Lz74qgOw9yjHUVZQMjojEu24.jpg'); background-size:cover;}
    #mg6{background:url('http://ekladata.com/mSrGtagjwVlu8FQy2cTlPPnJE-0.jpg'); background-size:cover;}
    #mg7{background:url('http://ekladata.com/7ddX6TK-gxjoV0ryiyfKPTHgb8I.jpg'); background-size:cover;}
    #mg8{background:url('http://ekladata.com/j2_aUcgf7XGf8BbHu1kr0XlDfZs.jpg'); background-size:cover;}
    #mg9{background:url('http://ekladata.com/73SYFiSfJZNdDfw5kVEgQE4vTjk.jpg'); background-size:cover;}

    #bt1:hover ~ #mg1,#bt2:hover ~ #mg2,#bt3:hover ~ #mg3,#bt4:hover ~ #mg4,#bt5:hover ~ #mg5,#bt6:hover ~ #mg6,#bt7:hover ~ #mg7,#bt8:hover ~ #mg8,#bt9:hover ~ #mg9{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotatey(0deg);}
    --></style>