• Exemple 14b

     

    Survol

     

     

     

     

     

     

     

     

     


    <p>&nbsp;</p>
    <div style="width: 60vw; height: 33.75vw; border: 0.5vw ridge white; margin: 1vh auto; text-align: left; background: white;">
    <p id="z0">Survol</p>
    <p id="z1" class="zc">&nbsp;</p>
    <p id="z2" class="zc">&nbsp;</p>
    <p id="z3" class="zc">&nbsp;</p>
    <p id="z4" class="zc">&nbsp;</p>
    <p id="z5" class="zc">&nbsp;</p>
    <p id="z6" class="zc">&nbsp;</p>
    <p id="z7" class="zc">&nbsp;</p>
    <p id="z8" class="zc">&nbsp;</p>
    <p id="z9" class="zc">&nbsp;</p>
    </div>

    <style><!--
    #z0{position:absolute; z-index:1; width:12vw; font-size:2vw; color:brown; text-shadow:0.1vh 0.1vh black; transform:translate(1vw,15.5vw);}
    .zc{position:absolute; z-index:1; width:60vw; height:33.75vw; filter:grayscale(1); transition:clip-path 1s linear 0s, filter 1s linear 1s;}
    #z1{background:url('http://ekladata.com/C-z7g4taN_YVXFNSQ2xQ80we-g8@1152x648.jpg');-webkit-clip-path: polygon(14vw 7vw, 46vw 7vw, 46vw 27vw, 14vw 27vw); clip-path: polygon(14vw 7vw, 46vw 7vw, 46vw 27vw, 14vw 27vw);}
    #z2{background:url('http://ekladata.com/cPf9z5GbIMvmc8bwTAKJz_vLgso@1152x648.jpg');-webkit-clip-path: polygon(0.5vw 0, 29.75vw 0, 29.75vw 6.25vw, 14vw 6.25vw); clip-path: polygon(0.5vw 0, 29.5vw 0, 29.5vw 6.25vw, 14vw 6.25vw);}
    #z3{background:url('http://ekladata.com/ScDnJQEaf6ORW2n49zSeC39QNIs@1152x648.jpg');-webkit-clip-path: polygon(30.25vw 0, 59.5vw 0, 46.5vw 6.25vw, 30.25vw 6.25vw); clip-path: polygon(30.25vw 0, 59.5vw 0, 46.5vw 6.25vw, 30.25vw 6.25vw);}
    #z4{background:url('http://ekladata.com/DUsuBXKgIa2Mz6nSy1OoJN3JhdE@1152x648.jpg');-webkit-clip-path: polygon(46.5vw 6.75vw, 60vw 0.25vw, 60vw 15vw, 46.5vw 15vw, ); clip-path: polygon(46.5vw 6.75vw, 60vw 0.25vw, 60vw 15vw, 46.5vw 15vw);}
    #z5{background:url('http://ekladata.com/eFqK-udFefvo3PMgIzx0mVOVjhk@1152x648.jpg');-webkit-clip-path: polygon(46.5vw 19vw,60vw 19vw, 60vw 33.5vw ); clip-path: polygon(46.5vw 19vw,60vw 19vw, 60vw 33.5vw, 46.5vw 27.25vw);}
    #z6{background:url('http://ekladata.com/buqCtG667IsMC9HCWOtNUh39hCY@1152x648.jpg');-webkit-clip-path: polygon(30.25vw 27.75vw,46.5vw 27.75vw, 59.25vw 33.75vw); clip-path: polygon(30.25vw 27.75vw,46.5vw 27.75vw, 59.25vw 33.75vw, 30.25vw 33.75vw);}
    #z7{background:url('http://ekladata.com/Eg8QqtHQohia4_9rdBLTvWO514g@1152x648.jpg');-webkit-clip-path: polygon(14vw 27.75vw, 29.75vw 27.75vw, 29.75vw 33.75vw, 0.5vw 33.75vw); clip-path: polygon(14vw 27.75vw, 29.75vw 27.75vw, 29.75vw 33.75vw, 0.5vw 33.75vw);}
    #z8{background:url('http://ekladata.com/AKfYdCi9UZDalF4SdGCJZAVAhlA@1152x648.jpg');-webkit-clip-path: polygon(0vw 17.25vw, 13.5vw 17.25vw, 13.5vw 27.5vw, 0vw 33.5vw); clip-path: polygon(0vw 19vw, 13.5vw 19vw, 13.5vw 27.5vw, 0vw 33.5vw);}
    #z9{background:url('http://ekladata.com/aWu-Yjtxe0TgRGIMiwZxSU_nqjM@1152x648.jpg');-webkit-clip-path: polygon(0vw 0.25vw, 13.5vw 6.5vw, 13.5vw 15vw, 0vw 15vw); clip-path: polygon(0vw 0.25vw, 13.5vw 6.5vw, 13.5vw 15vw, 0vw 15vw);}
    #z1:hover,#z2:hover,#z3:hover,#z4:hover,#z5:hover,#z6:hover,#z7:hover,#z8:hover,#z9:hover{z-index:5; -webkit-clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw); clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw);filter:grayscale(0); }
    --></style>