• Exemple 73

    Survol.

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left; border: 0.1vh solid black; background: url('http://ekladata.com/qsu30lVzc5E8pLcbvjGjZaoCNmY@1152x648.jpg'); background-size: cover;">
    <p id="turra1" class="turra">&nbsp;</p>
    <p id="turra2" class="turra">&nbsp;</p>
    <p id="turra3" class="turra">&nbsp;</p>
    <p id="turra4" class="turra">&nbsp;</p>
    <p id="turra5" class="turra">&nbsp;</p>
    <p id="turra6" class="turra">&nbsp;</p>
    <p id="turra7" class="turra">&nbsp;</p>
    <p id="turra8" class="turra">&nbsp;</p>
    </div>
    <style><!--
    .turra{position:absolute; z-index:1; width:6vw; height:4vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; background-size:80vw 45vw; transition:all 1s linear;}
    #turra1{background:url('http://ekladata.com/9imOLSSjbkR_jVSd1tl8y8iMOeM@1152x648.jpg'); background-position:-3vw -3vw; transform:translate(3vw,3vw);}
    #turra2{background:url('http://ekladata.com/7o5KaTdz3tp2uMpAnKT5Kw7KT6Y@1152x648.jpg'); background-position:-3vw -10vw; transform:translate(3vw,10vw);}
    #turra3{background:url('http://ekladata.com/YescJZPB3VXoIix-TIRD3Nz0Hj8@1152x648.jpg'); background-position:-3vw -17vw; transform:translate(3vw,17vw);}
    #turra4{background:url('http://ekladata.com/aTu4-dGydY4bDZ5bo-0mtgviljs@1152x648.jpg'); background-position:-3vw -24vw; transform:translate(3vw,24vw);}
    #turra5{background:url('http://ekladata.com/ZJLrdQVNcdrxtXCvhQtgGWEzhi8@1152x648.jpg'); background-position:-50vw -3vw; transform:translate(50vw,3vw);}
    #turra6{background:url('http://ekladata.com/H9RKZtL3DfmHMEFlt7Sj3vpnJC4@1152x648.jpg');background-position:-50vw -10vw; transform:translate(50vw,10vw); }
    #turra7{background:url('http://ekladata.com/lJeMTN7eFR_XbtmdryDZx5v1yms@1152x648.jpg'); background-position:-50vw -17vw; transform:translate(50vw,17vw);}
    #turra8{background:url('http://ekladata.com/FiLCgdn3LQUbCCqtEz8fisv2FR0@1152x648.jpg');background-position:-50vw -24vw; transform:translate(50vw,24vw);}
    #turra1:hover,#turra2:hover,#turra3:hover,#turra4:hover,#turra5:hover,#turra6:hover,#turra7:hover,#turra8:hover{z-index:5; width:60vw; height:33.75vw; box-shadow:none; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>