• Montage 337

    6 images au ratio 16/9.

    Survol

     

     

     

     

     

     

    <div style="position: relative; width: 900px; height: 506px; border: 1px solid black; margin: 10px auto; background: linear-gradient(to bottom, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); text-align: left;">
    <p id="tg0">Survol</p>
    <p id="tg1" class="tg">&nbsp;</p>
    <p id="tg2" class="tg">&nbsp;</p>
    <p id="tg3" class="tg">&nbsp;</p>
    <p id="tg4" class="tg">&nbsp;</p>
    <p id="tg5" class="tg">&nbsp;</p>
    <p id="tg6" class="tg">&nbsp;</p>
    </div>
    <style><!--
    #tg0{position:absolute; z-index:1; width:100px; height:50px; line-height:50px; text-align:center; font-size:25px; color:white; text-shadow:1px 1px black; transform:translate(400px,228px);}
    .tg{position:absolute; z-index:1; width:900px; height:506px; transition:all 1s linear;}
    #tg1{background:url('http://ekladata.com/wm34iAa2BT91zaoKHyq56S5SJOE@900x506.jpg'); background-size:900px 506px; clip-path:polygon(0px 0px, 440px 0px, 400px 228px,400px 228px);}
    #tg2{background:url('http://ekladata.com/mYP3yEqICaPltCjFewdEI0rsxVg@900x506.jpg'); background-size:900px 506px; clip-path:polygon(460px 0px, 900px 0px, 500px 228px,500px 228px);}
    #tg3{background:url('http://ekladata.com/sJ6Mxk-8SrcB5p09HNjN1IAcvgw@900x506.jpg'); background-size:900px 506px; clip-path:polygon(500px 253px, 900px 30px, 900px 476px,500px 253px);}
    #tg4{background:url('http://ekladata.com/AgG8UD7KsjwpFqsh1BvImaxSlTQ@900x506.jpg'); background-size:900px 506px; clip-path:polygon(500px 278px, 500px 278px, 900px 506px,460px 506px);}
    #tg5{background:url('http://ekladata.com/wAjoL7rBkTiglWVPBsvbArMl4hY@900x506.jpg'); background-size:900px 506px; clip-path:polygon(400px 278px, 400px 278px, 440px 506px,0px 506px);}
    #tg6{background:url('http://ekladata.com/HwUWd_RYRZCi_fm6Y-CzHTRH0bw@900x506.jpg'); background-size:900px 506px; clip-path:polygon(0px 30px, 400px 253px, 400px 253px,0px 476px);}
    #tg1:hover,#tg2:hover,#tg3:hover,#tg4:hover,#tg5:hover,#tg6:hover{z-index:5;clip-path:polygon(0px 0px, 900px 0px, 900px 506px,0px 506px);}
    --></style>