• Cloud: version survol

     

    Survol

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.6vh ridge white; background: url('http://ekladata.com/88GQSUOZz95ivEuieLaYwCn7Sdg.jpg'); background-size: cover;">
    <p id="p0">Survol</p>
    <p id="p1" class="p">&nbsp;</p>
    <p id="p2" class="p">&nbsp;</p>
    <p id="p3" class="p">&nbsp;</p>
    <p id="p4" class="p">&nbsp;</p>
    <p id="p5" class="p">&nbsp;</p>
    <p id="p6" class="p">&nbsp;</p>
    <p id="p7" class="p">&nbsp;</p>
    <p id="p8" class="p">&nbsp;</p>
    <p id="p9" class="p">&nbsp;</p>
    <p id="p10" class="p">&nbsp;</p>
    </div>

    <style><!--
    #p0{position:absolute; z-index:1; width:10vw; background:rgba(0,0,0,0.5); transform:translate(25vw,1vw); text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black;}
    .p{position:absolute; z-index:1; width:5vw; height:5vw; border-radius:50%; box-shadow:inset 0.4vh 0.4vh 0.6vh white, inset -0.4vh -0.4vh 0.6vh black;transition:all 1s linear;}
    #p1{background:url('http://ekladata.com/zYHMBwr_1llR8q_nebFkBXeCs_0.jpg'); background-size:cover; transform:translate(2vw,2vw);}
    #p2{background:url('http://ekladata.com/frKxhFfDA8e5HwPXbnF2DZ6-5is.jpg'); background-size:cover; transform:translate(2vw,8vw);}
    #p3{background:url('http://ekladata.com/BAp6186vR2idlbZeCyGy6JSdZtE.jpg'); background-size:cover; transform:translate(2vw,14vw);}
    #p4{background:url('http://ekladata.com/f0sgJpbTLburDfNRQRvrSJ0rncw.jpg'); background-size:cover; transform:translate(2vw,20vw);}
    #p5{background:url('http://ekladata.com/7qMSuPxrsV65N1jBzCsWQvf_kvQ.jpg'); background-size:cover; transform:translate(2vw,26vw);}
    #p6{background:url('http://ekladata.com/vzMrFSkHfpWoQvkFGg1yigHagyY.jpg'); background-size:cover; transform:translate(53vw,2vw);}
    #p7{background:url('http://ekladata.com/yDi2D0JkVpIQivxaNCyuqQZU_Lo.jpg'); background-size:cover; transform:translate(53vw,8vw);}
    #p8{background:url('http://ekladata.com/UUfIFoMxwyzakv6xj8BRqDbI9kE.jpg'); background-size:cover; transform:translate(53vw,14vw);}
    #p9{background:url('http://ekladata.com/Nv-ocLx7RXP4Ta-x-F_ShJ09KB4.jpg'); background-size:cover; transform:translate(53vw,20vw);}
    #p10{background:url('http://ekladata.com/fW02T4mwgJp5-S7h64QlIFl7rfY.jpg'); background-size:cover; transform:translate(53vw,26vw);}
    #p1:hover,#p2:hover,#p3:hover,#p4:hover,#p5:hover,#p6:hover,#p7:hover,#p8:hover,#p9:hover,#p10:hover{z-index:10; width:60vw; height:33.75vw; border-radius:0%; box-shadow:none; transform:translate(0vw,0vw);}
    --></style>