• Exemple 132

     Survol. 8 images au ratio 16/9; variante du code précédent.

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="patb1" class="patb">&nbsp;</p>
    <p id="patb2" class="patb">&nbsp;</p>
    <p id="patb3" class="patb">&nbsp;</p>
    <p id="patb4" class="patb">&nbsp;</p>
    <p id="patb5" class="patb">&nbsp;</p>
    <p id="patb6" class="patb">&nbsp;</p>
    <p id="patb7" class="patb">&nbsp;</p>
    <p id="patb8" class="patb">&nbsp;</p>
    </div>
    <style><!--
    .patb{position:absolute; z-index:1; width:60vw; height:33.75vw; transition:all 1s linear;}
    #patb1{background:url('http://ekladata.com/WyH1dBxDbXUVH-w7XLnTLsIge8U.jpg'); background-size:60vw 33.75vw; clip-path:polygon(9vw 2vw, 16vw 16vw, 9vw 30vw, 2vw 16vw); }
    #patb2{background:url('http://ekladata.com/MlgBFJgdPJnjtgexBqhC4wd5qfw.jpg'); background-size:60vw 33.75vw; clip-path:polygon(15vw 2vw, 22vw 16vw, 15vw 30vw, 8vw 16vw); }
    #patb3{background:url('http://ekladata.com/5ZC3Jtlr7bkg2eanwlicvGvCmVs.jpg'); background-size:60vw 33.75vw; clip-path:polygon(21vw 2vw, 28vw 16vw, 21vw 30vw, 14vw 16vw); }
    #patb4{background:url('http://ekladata.com/01DbHUwru3Elnli7Wxkv9WwzaOM.jpg'); background-size:60vw 33.75vw; clip-path:polygon(27vw 2vw, 35vw 16vw, 27vw 30vw, 20vw 16vw); }
    #patb5{background:url('http://ekladata.com/ofv1QOaXDfIH6i2JE-RjSrDHMO4.jpg'); background-size:60vw 33.75vw; clip-path:polygon(33vw 2vw, 41vw 16vw, 33vw 30vw, 26vw 16vw); }
    #patb6{background:url('http://ekladata.com/o0ESY5Qz2Vf4GPU9nL7UDMVP5Ws.jpg'); background-size:60vw 33.75vw; clip-path:polygon(39vw 2vw, 47vw 16vw, 39vw 30vw, 32vw 16vw); }
    #patb7{background:url('http://ekladata.com/fc5q8BcdUiHrMlRp3SscxxU4ZxM.jpg'); background-size:60vw 33.75vw; clip-path:polygon(45vw 2vw, 53vw 16vw, 45vw 30vw, 38vw 16vw); }
    #patb8{background:url('http://ekladata.com/WszhfnkD_-Nv_aniPZOnT5msxtw.jpg'); background-size:60vw 33.75vw; clip-path:polygon(51vw 2vw, 59vw 16vw, 51vw 30vw, 44vw 16vw); }
    #patb1:hover,#patb2:hover,#patb3:hover,#patb4:hover,#patb5:hover,#patb6:hover,#patb7:hover,#patb8:hover{z-index:15; clip-path:polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw);}
    --></style>