• Exemple 8c

     

    Survol

     

     

     

     

     

     

     

     

    <div id="bim">
    <p id="cad0">Survol</p>
    <p id="cad1" class="cad">&nbsp;</p>
    <p id="cad2" class="cad">&nbsp;</p>
    <p id="cad3" class="cad">&nbsp;</p>
    <p id="cad4" class="cad">&nbsp;</p>
    <p id="cad5" class="cad">&nbsp;</p>
    <p id="cad6" class="cad">&nbsp;</p>
    <p id="cad7" class="cad">&nbsp;</p>
    <p id="cad8" class="cad">&nbsp;</p>
    </div>
    <style><!--
    #bim{width:60vw; height:33.75vw; border:0.2vw solid black; margin:1vh auto; background:url(http://ekladata.com/J2HhFOlGVKNNCjSbKo6-qXUU0Qk/img727.jpg); text-align:center;}
    #cad0{position:absolute; z-index:1; width:50vw; height:28vw; transform:translate(5vw,2.5vw); font-size:1vw; color:brown; text-shadow:0.1vh 0.1vh black; box-sizing:border-box; border: 10px solid grey; border-image: url(http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg) 10% round; background:url('http://ekladata.com/AHhv6xStUIreQonx5ATb-mDlvh0/00018.jpg');}
    .cad{position:absolute; z-index:1; width:11.5vw; height:11.5vw; border-radius:50%; box-shadow:inset 0.6vh 0.6vh 1vw white, inset -0.6vh -0.6vh 1vw white; background-size:60vw 33.75vw; transition:all 1s linear;}
    #cad1{background:url('http://ekladata.com/4rJzLYW-La1z1j78r2EtfDIGQQg@1152x648.jpg'); transform:translate(6vw,4.5vw); background-position:-6vw -4.5vw; background-size:60vw 33.75vw;}
    #cad2{background:url('http://ekladata.com/yeaaWBeU7av7Cj-mh343HB2Gh8k@1152x648.jpg'); transform:translate(18vw,4.5vw); background-position:-18vw -4.5vw; background-size:60vw 33.75vw;}
    #cad3{background:url('http://ekladata.com/Lh886vf_N_vfOaIluP9ZAl_J6hk@1152x648.jpg'); transform:translate(30vw,4.5vw); background-position:-30vw -4.5vw; background-size:60vw 33.75vw;}
    #cad4{background:url('http://ekladata.com/QTr_yij5LJAMM73Oqd9MPkc5_hg@1152x648.jpg'); transform:translate(42vw,4.5vw);background-position:-42vw -4.5vw; background-size:60vw 33.75vw;}
    #cad5{background:url('http://ekladata.com/PlSs6qrrlSLBzkdEcV1Ir72y118@1152x648.jpg'); transform:translate(6vw,17.5vw); background-position:-6vw -17.5vw; background-size:60vw 33.75vw;}
    #cad6{background:url('http://ekladata.com/h7jnAQGDSDqB73Fem7dYAulLdyg@1152x648.jpg'); transform:translate(18vw,17.5vw); background-position:-18vw -17.5vw; background-size:60vw 33.75vw;}
    #cad7{background:url('http://ekladata.com/AJAa1VGBDItkllSQgljlqZRJUIg@1152x648.jpg'); transform:translate(30vw,17.5vw); background-position:-30vw -17.5vw; background-size:60vw 33.75vw;}
    #cad8{background:url('http://ekladata.com/6z1LwUR32OP2hTIFvVd26cr0K8E@1152x648.jpg'); transform:translate(42vw,17.5vw); background-position:-42vw -17.5vw; background-size:60vw 33.75vw;}
    #cad1:hover,#cad2:hover,#cad3:hover,#cad4:hover,#cad5:hover,#cad6:hover,#cad7:hover,#cad8:hover{z-index:5; width:60vw; height:33.75vw; border-radius:0%; box-shadow:none;transform:translate(0vw,0vw); background-position:0vw 0vw;}
    --></style>