• Exemple 84

    Survol

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 1000px; height: 563px; margin: 1vh auto;">
    <p id="tri1" class="tri">&nbsp;</p>
    <p id="tri2" class="tri">&nbsp;</p>
    <p id="tri3" class="tri">&nbsp;</p>
    <p id="tri4" class="tri">&nbsp;</p>
    <p id="tri5" class="tria">&nbsp;</p>
    <p id="tri6" class="tria">&nbsp;</p>
    <p id="tri7" class="tria">&nbsp;</p>
    <p id="tri8" class="tria">&nbsp;</p>
    <p id="rond1" class="rd">&nbsp;</p>
    <p id="rond2" class="rd">&nbsp;</p>
    <p id="rond3" class="rd">&nbsp;</p>
    <p id="rond4" class="rd">&nbsp;</p>
    <p id="rond5" class="rd">&nbsp;</p>
    <p id="rond6" class="rd">&nbsp;</p>
    <p id="rond7" class="rd">&nbsp;</p>
    <p id="rond8" class="rd">&nbsp;</p>
    </div>

    <style><!--
    .tri{position:absolute; z-index:1; width:250px; height:250px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background-size:250px 250px;}
    #tri1{background:url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); transform:translate(0px,0px);}
    #tri2{background:url('http://ekladata.com/6M5dyVS_9JYhP5a4_YUbB00LEQM/marble2.jpg'); transform:translate(250px,0px);}
    #tri3{background:url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); transform:translate(500px,0px);}
    #tri4{background:url('http://ekladata.com/6M5dyVS_9JYhP5a4_YUbB00LEQM/marble2.jpg'); transform:translate(750px,0px);}
    .tria{position:absolute; z-index:1; width:250px; height:250px; clip-path: polygon(0 0, 50% 100%, 100% 0); background-size:20vw 20vw;}
    #tri5{background:url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); transform:translate(0px,290px);}
    #tri6{background:url('http://ekladata.com/6M5dyVS_9JYhP5a4_YUbB00LEQM/marble2.jpg'); transform:translate(250px,290px);}
    #tri7{background:url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); transform:translate(500px,290px);}
    #tri8{background:url('http://ekladata.com/6M5dyVS_9JYhP5a4_YUbB00LEQM/marble2.jpg'); transform:translate(750px,290px);}
    .rd{ position:absolute; z-index:2; width:130px; height:130px; border-radius:50%; box-shadow:inset -3px -3px 6px white, inset 3px 3px 6px black; transition:all 1s linear;}
    #rond1{background:url('http://ekladata.com/k7Y3HMjhjmXhxvjBE9dU2f2Kl9I@1000x563.jpg'); background-position:-60px -100px; transform:translate(60px,100px);}
    #rond2{background:url('http://ekladata.com/HoP9huvA0qSiT7e6cTT7rIvYaOk@1000x563.jpg'); background-position:-310px -100px; transform:translate(310px,100px);}
    #rond3{background:url('http://ekladata.com/mDvEueU1lazt8rupRHvlFy8l7VU@1000x563.jpg'); background-position:-560px -100px; transform:translate(560px,100px);}
    #rond4{background:url('http://ekladata.com/kwGLwSlwib2Zck9jCGs3ZOseXzY@1000x563.jpg'); background-position:-810px -100px; transform:translate(810px,100px);}
    #rond5{background:url('http://ekladata.com/MkWkIdgqQth73vhp3JNmsc1Lvpk@1000x563.jpg'); background-position:-60px -310px; transform:translate(60px,310px);}
    #rond6{background:url('http://ekladata.com/9sO9iiVDNJMNrpK2kinhXJaor1U@1000x563.jpg'); background-position:-310px -310px; transform:translate(310px,310px);}
    #rond7{background:url('http://ekladata.com/NdFNupZ0vy3N05hQaasBXlNSBn0@1000x563.jpg'); background-position:-560px -310px; transform:translate(560px,310px);}
    #rond8{background:url('http://ekladata.com/D90RiI0-gBZ-A2A809FvMonKqQg@1000x563.jpg'); background-position:-810px -310px; transform:translate(810px,310px);}
    #rond1:hover,#rond2:hover, #rond3:hover,#rond4:hover,#rond5:hover,#rond6:hover, #rond7:hover,#rond8:hover{z-index:5; width:1000px; height:563px; border-radius:0%; background-position:0px 0px; transform:translate(0vw,0vw);}
    --></style>