• Exemple 177

    6 images au ratio 16/9; Survol 

     

     

     

     

     

     

    <div style="width: 60vw; height: 33vw; margin: 1vh auto; background: white;">
    <p id="ang1" class="ang">&nbsp;</p>
    <p id="ang2" class="ang">&nbsp;</p>
    <p id="ang3" class="ang">&nbsp;</p>
    <p id="ang4" class="ang">&nbsp;</p>
    <p id="ang5" class="ang">&nbsp;</p>
    <p id="ang6" class="ang">&nbsp;</p>
    </div>

    <style><!--
    .ang{position:absolute; z-index:1; width:60vw; height:34vw;  transition:all 1s linear;}
    #ang1{background:url('http://ekladata.com/HuUACa29v1W6d-XDk7LX0pR7JrI.jpg'); background-size:60vw 34vw; clip-path:polygon(0vw 0vw, 9.5vw 0vw, 9.5vw 5vw, 0vw 5vw);}
    #ang2{background:url('http://ekladata.com/DveELvMfVK5p77cVEBfxl-DuvRE.jpg'); background-size:60vw 34vw; clip-path:polygon(10vw 0vw, 19.5vw 0vw, 19.5vw 10.5vw, 0vw 10.5vw, 0vw 5.5vw, 10vw 5.5vw);}
    #ang3{background:url('http://ekladata.com/7JCRU_cIZlM5TA7O-Nz05PgEddo.jpg'); background-size:60vw 34vw; clip-path:polygon(20vw 0vw, 29.5vw 0vw, 29.5vw 16vw, 0vw 16vw, 0vw 11vw, 20vw 11vw);}
    #ang4{background:url('http://ekladata.com/d091x9hhg9c-Z5l26TbtxhESDGc.jpg'); background-size:60vw 34vw; clip-path:polygon(30vw 0vw, 39.5vw 0vw, 39.5vw 21.5vw, 0vw 21.5vw, 0vw 16.5vw, 30vw 16.5vw);}
    #ang5{background:url('http://ekladata.com/eBYVdkiutUkCCNvbczYcjre1R6g.jpg'); background-size:60vw 34vw; clip-path:polygon(40vw 0vw, 49.5vw 0vw, 49.5vw 27vw, 0vw 27vw, 0vw 22vw, 40vw 22vw);}
    #ang6{background:url('http://ekladata.com/WHxjUNoL2UbxeJzBoP9o7HceMls.jpg'); background-size:60vw 34vw; clip-path:polygon(50vw 0vw, 59.5vw 0vw, 59.5vw 32.5vw, 0vw 32.5vw, 0vw 27.5vw, 50vw 27.5vw);}
    #ang1:hover{z-index:10; clip-path:polygon(0vw 0vw, 60vw 0vw, 60vw 34vw, 0vw 34vw);}
    #ang2:hover,#ang3:hover,#ang4:hover,#ang5:hover,#ang6:hover{z-index:10; clip-path:polygon(0vw 0vw, 60vw 0vw, 60vw 34vw, 0vw 34vw, 0vw 0vw, 0vw 0vw);}
    --></style>