• Exemple 85

    "L'oeil était dans la tombe et regardait Caïn". Victor Hugo.

    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:150px; border-radius:50%; border:0.8vh ridge grey;}
    #tri1{box-sizing:border-box; background:url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); transform:translate(0px,20px);}
    #tri2{box-sizing:border-box;background:url('http://ekladata.com/6M5dyVS_9JYhP5a4_YUbB00LEQM/marble2.jpg'); transform:translate(250px,20px);}
    #tri3{box-sizing:border-box;background:url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); transform:translate(500px,20px);}
    #tri4{box-sizing:border-box;background:url('http://ekladata.com/6M5dyVS_9JYhP5a4_YUbB00LEQM/marble2.jpg'); transform:translate(750px,20px);}
    .tria{position:absolute; z-index:1; width:250px; height:150px; border-radius:50%; border:0.8vh ridge grey;}
    #tri5{box-sizing:border-box;background:url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); transform:translate(0px,290px);}
    #tri6{box-sizing:border-box;background:url('http://ekladata.com/6M5dyVS_9JYhP5a4_YUbB00LEQM/marble2.jpg'); transform:translate(250px,290px);}
    #tri7{box-sizing:border-box;background:url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); transform:translate(500px,290px);}
    #tri8{box-sizing:border-box;background:url('http://ekladata.com/6M5dyVS_9JYhP5a4_YUbB00LEQM/marble2.jpg'); transform:translate(750px,290px);}
    .rd{ position:absolute; z-index:2; width:120px; height:120px; 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/YIbd7Yh-0LE3XSvuPXQ0K7JTG24.jpg'); background-size:1000px 563px; background-position:-60px -35px; transform:translate(60px,35px);}
    #rond2{background:url('http://ekladata.com/rCFbVw4hP3mSUXZRFxY-Tl2V80c.jpg'); background-size:1000px 563px;background-position:-315px -35px; transform:translate(315px,35px);}
    #rond3{background:url('http://ekladata.com/4FPWtMQnW4u2FAwHrq5D4K4zTsc.jpg'); background-size:1000px 563px;background-position:-565px -35px; transform:translate(565px,35px);}
    #rond4{background:url('http://ekladata.com/qCz52l2M5YB9KEuk-7CKg8gcWA8 .jpg'); background-size:1000px 563px;background-position:-815px -35px; transform:translate(815px,35px);}
    #rond5{background:url('http://ekladata.com/kLZKy89ujg3uVimzOc_aIOSCick.jpg'); background-size:1000px 563px;background-position:-60px -305px; transform:translate(60px,305px);}
    #rond6{background:url('http://ekladata.com/H0Z5m6vlAoQGs12iURSm1MmWBoE.jpg'); background-size:1000px 563px;background-position:-315px -305px; transform:translate(315px,305px);}
    #rond7{background:url('http://ekladata.com/mwZwz8Ggsg3NXnypZ1WLqlh42Is.jpg'); background-size:1000px 563px;background-position:-565px -305px; ;transform:translate(565px,305px);}
    #rond8{background:url('http://ekladata.com/s-gFz6HqGJHS1ztZ_UTJaGJ1H8Y.jpg'); background-size:1000px 563px;background-position:-815px -305px; transform:translate(815px,305px);}
    #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-size:1000px 563px; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>