• Montage 307

     6 images au ratio 16/9.

     

     

     

     

     

     

     

    Survol heures et aiguilles.


    <div style="width: 900px; height: 506px; margin: 5px auto; text-align: left;">
    <p id="cad1">&nbsp;</p>
    <p id="her1" class="her">&nbsp;</p>
    <p id="her2" class="her">&nbsp;</p>
    <p id="her3" class="her">&nbsp;</p>
    <p id="her4" class="her">&nbsp;</p>
    <p id="her5" class="aig">&nbsp;</p>
    <p id="her6" class="aig">&nbsp;</p>
    <p id="her7">Survol heures et aiguilles.</p>
    </div>
    <style><!--
    #cad1{position:absolute; z-index:1; width:500px; height:500px; border-radius:50%; border:1px solid black; box-shadow:inset 6px 6px 8px black, inset -6px -6px 8px white; background: radial-gradient(ellipse at center, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); transform:translate(200px,2px);}
    #her7{position:absolute; z-index:1; width:200px; font-size:20px; transform:translate(0px,0px);}
    .her{position:absolute; z-index:1; border:2px solid black; transition:all 1s linear;}
    #her1{background:url('http://ekladata.com/-Yj7s2B0wEM_7zSF1P88bLXzgYk.jpg'); background-size:900px 506px; background-position:-445px -15px; width:10px; height:20px; transform:translate(445px,15px);}
    #her2{background:url('http://ekladata.com/_okhYl4_OZIqIya37-mTcSelJTM.jpg'); background-size:900px 506px; background-position:-665px -252px; width:20px; height:10px; transform:translate(665px,252px);}
    #her3{background:url('http://ekladata.com/FwmRXQcyF6JTx_07WqRizSKTZPA.jpg'); background-size:900px 506px; background-position:-445px -470px; width:10px; height:20px; transform:translate(445px,470px);}
    #her4{background:url('http://ekladata.com/VAcKd7_vVUixdaoEu6z-FYHiDQw.jpg'); background-size:900px 506px; background-position:-222px -252px; width:20px; height:10px; transform:translate(222px,252px);}
    .aig{position:absolute; z-index:1; width:900px; height:506px; transition:all 1s linear;}
    #her5{background:url('http://ekladata.com/nKwVoa3J5cLujTVTmg3e7Ul9eH8.jpg'); background-size:900px 506px; clip-path:polygon(50% 15%,51.5% 40%, 50% 50%,48.5% 40%);}
    #her6{background:url('http://ekladata.com/lCeHK2aUC6RDgNSQozFq5QG4YFo.jpg'); background-size:900px 506px; clip-path:polygon(50% 50%,55% 47.5%, 65% 50%,55% 52%);}
    #her1:hover,#her2:hover,#her3:hover,#her4:hover{z-index:5; width:900px; height:506px; background-position:0px 0px; transform:translate(0px,0px);}
    #her5:hover,#her6:hover{z-index:5;clip-path:polygon(0% 0%,100% 0%, 100% 100%,0% 100%);}
    --></style>