• Montage 29

     

    Clic maintenu

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; border: 0.4vh solid white; margin: 1vh auto; background: url('http://ekladata.com/FGHALsYq5yYrTOZGe_yxjgrgywY@1152x648.jpg'); background-size: cover;">
    <p id="bt0">Clic maintenu</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="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>
    </div>
    <style><!--
    #bt0{position:absolute; z-index:1; width:8vw; height:1.7vw; text-align:center; background:rgba(0,0,0,0.5); font-size:1vw; color:white; transform:translate(52vw,0vw);}
    .bt{position:absolute; z-index:1; width:2vw; height:2vw; border:0.3vh solid white; box-shadow: -0.4vh -0.4vh 0.2vh black, inset -0.3vh -0.3vh 0.4vh black, inset 0.4vh 0.4vh 0.4vh white; border-radius:50% 0 0 50%; transition:all 1s linear;}
    #bt1{background:green; transform:translate(57.8vw,3vw);}
    #bt2{background:green; transform:translate(57.8vw,7vw);}
    #bt3{background:green; transform:translate(57.8vw,11vw);}
    #bt4{background:green; transform:translate(57.8vw,15vw);}
    #bt5{background:green; transform:translate(57.8vw,19vw);}

    .mg{position:absolute; z-index:1; width:6vw; height:6vw; border:0.4vh solid black; border-radius:50%; box-shadow:inset -0.4vh -0.4vh 0.8vh white, inset 0.4vh 0.4vh 0.8vh black; transition:all 1s linear;}
    #mg1{background:url('http://ekladata.com/zsw7afFewZiQlzqxGdVyyB6r-Jk@1152x648.jpg'); background-position:-2vw -2vw; transform:translate(2vw,2vw);}
    #mg2{background:url('http://ekladata.com/UXX-n5_ZWamZpFfkwWYOEJ-svqE@1152x648.jpg'); background-position:-8vw -8vw; transform:translate(8vw,8vw);}
    #mg3{background:url('http://ekladata.com/rOAFnTErMgtemdmIpo4HGin-BO4@1152x648.jpg'); background-position:-2vw -14vw; transform:translate(2vw,14vw);}
    #mg4{background:url('http://ekladata.com/OtSk6GVhiCb9PIR02GQBzJy3zIc@1152x648.jpg'); background-position:-10vw -20vw; transform:translate(10vw,20vw);}
    #mg5{background:url('http://ekladata.com/l2ivbYtIVT42LEDUwRR8IMZQQnw@1152x648.jpg'); background-position:-2vw -26vw; transform:translate(2vw,26vw);}

    #bt1:active ~ #mg1,#bt2:active ~ #mg2,#bt3:active ~ #mg3,#bt4:active ~ #mg4,#bt5:active ~ #mg5{z-index:10; box-sizing:border-box; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>