• Exemple 207

     

    Survol

     

     

     

     

     

     

     

     

    <div style="width: 1600px; height: 900px; margin: 5px auto;">
    <p id="no0">Survol</p>
    <p id="no1" class="no">&nbsp;</p>
    <p id="no2" class="no">&nbsp;</p>
    <p id="no3" class="no">&nbsp;</p>
    <p id="no4" class="no">&nbsp;</p>
    <p id="no5" class="no">&nbsp;</p>
    <p id="no6" class="no">&nbsp;</p>
    <p id="no7" class="no">&nbsp;</p>
    <p id="no8" class="no">&nbsp;</p>
    </div>

    <style><!--
    #no0{position:absolute; z-index:1; width:200px; transform:translate(700px,400px); font-size:50px; color:aqua; text-shadow:2px 2px black;}
    .no{position:absolute; z-index:1; width:480px; height:270px; border-radius:50%; box-shadow:inset 6px 6px 8px black, inset -6px -6px 8px white; transition:all 1s linear;}
    #no1{box-sizing:border-box; background:url('http://ekladata.com/936-TtnK8VKKl9MQ1DOAoFJdZPw.jpg'); background-size:cover; transform:translate(560px,50px);}
    #no2{box-sizing:border-box; background:url('http://ekladata.com/m7RIOjMCOSPShjnig4lH-BhLcgA.jpg'); background-size:cover; transform:translate(940px,130px);}
    #no3{box-sizing:border-box; background:url('http://ekladata.com/iUSkS6hTdqThwFVVUABTgjj1xgY.jpg'); background-size:cover; transform:translate(1070px,315px);}
    #no4{box-sizing:border-box; background:url('http://ekladata.com/lNJkZKCPIEdinzXQMwUXvhIaV5E.jpg'); background-size:cover; transform:translate(940px,500px);}
    #no5{box-sizing:border-box; background:url('http://ekladata.com/1UlM2KdrGgwjzJkMPddsGpXpIiU.jpg'); background-size:cover; transform:translate(560px,580px);}
    #no6{box-sizing:border-box; background:url('http://ekladata.com/1QXGL1j1gnXxznwdq8JO_xYzxew.jpg'); background-size:cover; transform:translate(255px,500px);}
    #no7{box-sizing:border-box; background:url('http://ekladata.com/ZdFvMvDGcpwLvH-Rl3ZbXBsyZXQ.jpg'); background-size:cover; transform:translate(50px,315px);}
    #no8{box-sizing:border-box; background:url('http://ekladata.com/2j48gIsF6GjwI7JdCQ2tvsY_qSk.jpg'); background-size:cover; transform:translate(255px,130px);}
    #no1:hover,#no2:hover,#no3:hover,#no4:hover,#no5:hover,#no6:hover,#no7:hover,#no8:hover{z-index:5; width:1600px; height:900px; border-radius:0%; transform:translate(0px,0px);}
    --></style>