• Exemple 223

    Survol : 8 images au ratio 16/9

     

     

     

     

     

     

     

     

    <div style="width: 1000px; height: 563px; margin: 5px auto; text-align: left;">
    <p id="cp1" class="cp">&nbsp;</p>
    <p id="cp2" class="cp">&nbsp;</p>
    <p id="cp3" class="cp">&nbsp;</p>
    <p id="cp4" class="cp">&nbsp;</p>
    <p id="cp5" class="cp">&nbsp;</p>
    <p id="cp6" class="cp">&nbsp;</p>
    <p id="cp7" class="cp">&nbsp;</p>
    <p id="cp8" class="cp">&nbsp;</p>
    </div>

    <style><!--
    .cp{position:absolute; z-index:1; width:1000px; height:563px; transition:all 1s linear;}
    #cp1{background:url('http://ekladata.com/kV45JfYf40HMzflCTdS3wCnFvZw.jpg'); background-size:1000px 563px; clip-path:polygon(40px 0px,460px 0px, 500px 281px, 500px 281px);}
    #cp2{background:url('http://ekladata.com/GJxbdx_UGTvoocWK5UWK6o6oGLA.jpg'); background-size:1000px 563px; clip-path:polygon(540px 0px,960px 0px, 500px 281px, 500px 281px);}
    #cp3{background:url('http://ekladata.com/aEYNykkfys7xQOW6cy_1D-9UNtg.jpg'); background-size:1000px 563px; clip-path:polygon(500px 281px,1000px 30px, 1000px 260px, 500px 281px);}
    #cp4{background:url('http://ekladata.com/cpg6OTo7Hu3Ep19_PvxMYHfOBnI.jpg'); background-size:1000px 563px; clip-path:polygon(500px 281px,1000px 310px, 1000px 530px, 500px 281px);}
    #cp5{background:url('http://ekladata.com/0vre8tjINgHqYpDknfRWNetKWP8.jpg'); background-size:1000px 563px; clip-path:polygon(500px 281px,500px 281px, 960px 563px, 540px 563px);}
    #cp6{background:url('http://ekladata.com/gc49k2jbypVZNGrVqxO2JTmtJzI.jpg'); background-size:1000px 563px; clip-path:polygon(500px 281px,500px 281px, 460px 563px, 40px 563px);}
    #cp7{background:url('http://ekladata.com/D8BgRgb64y4GVeXx9sQCz02Xv2A.jpg'); background-size:1000px 563px; clip-path:polygon(0px 310px,500px 281px, 500px 281px, 0px 530px);}
    #cp8{background:url('http://ekladata.com/5nvAcYITdDSK2lElx5LLktigG14.jpg'); background-size:1000px 563px; clip-path:polygon(0px 30px,500px 281px, 500px 281px, 0px 260px);}
    #cp1:hover,#cp2:hover,#cp3:hover,#cp4:hover,#cp5:hover,#cp6:hover,#cp7:hover,#cp8:hover{z-index:5; clip-path:polygon(0px 0px,1000px 0px, 1000px 563px, 0px 563px);}
    --></style>