• Exemple 74

    Survol

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left; border: 0.1vh solid black; background: url('http://ekladata.com/t9nNU6qEnnCqiDMeZlZNfoVHT1s@1152x648.jpg'); background-size: cover;">
    <p id="turr1" class="turr">&nbsp;</p>
    <p id="turr2" class="turr">&nbsp;</p>
    <p id="turr3" class="turr">&nbsp;</p>
    <p id="turr4" class="turr">&nbsp;</p>
    <p id="turr5" class="turr">&nbsp;</p>
    <p id="turr6" class="turr">&nbsp;</p>
    <p id="turr7" class="turr">&nbsp;</p>
    </div>
    <style><!--
    .turr{position:absolute; z-index:1; width:4vw; height:4vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; border-radius:50%; background-size:60vw 33.75vw; transition:all 1s linear;}
    #turr1{background:url('http://ekladata.com/XWeKjySScKTRVY4FyYluxBQU47s@1152x648.jpg'); background-position:-5vw -26vw; transform:translate(5vw,26vw);}
    #turr2{ background:url('http://ekladata.com/Atr6NMJzjYRFu6akfuvLrv7dnSs@1152x648.jpg');background-position:-12vw -26vw; transform:translate(12vw,26vw);}
    #turr3{ background:url('http://ekladata.com/aHx8lvalgDci4hmT8b3HhSPhL3s@1152x648.jpg'); background-position:-19vw -26vw; transform:translate(19vw,26vw);}
    #turr4{ background:url('http://ekladata.com/VIYM-Bos9Evt6SpMz4ir2Mssdoc@1152x648.jpg'); background-position:-26vw -26vw; transform:translate(26vw,26vw);}
    #turr5{ background:url('http://ekladata.com/75ywWL8Y8Yqpwd-NZI9pADi1JDI@1152x648.jpg'); background-position:-33vw -26vw; transform:translate(33vw,26vw);}
    #turr6{ background:url('http://ekladata.com/b7FSxpwHQw_zOnAIvi9w6xWU1Cw@1152x648.jpg'); background-position:-40vw -26vw;transform:translate(40vw,26vw);}
    #turr7{ background:url('http://ekladata.com/Qk1OkKH6e_f6ObtI0fdGX6WPATw@1152x648.jpg'); background-position:-47vw -26vw;transform:translate(47vw,26vw);}
    #turr1:hover,#turr2:hover,#turr3:hover,#turr4:hover,#turr5:hover,#turr6:hover,#turr7:hover{z-index:5; width:60vw; height:33.75vw; border-radius:0%; box-shadow:none; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>