• Montage 256

    1 + 6 images au ratio 16/9. Survol 

     


    <div style="width: 1000px; height: 563px; margin: 5px auto; background: url('http://ekladata.com/E1AHqPjeNvGlxfOISOWB6RNdfIc.jpg'); background-size: cover; border: 2px solid grey; text-align: left;">
    <p id="deco1">&nbsp;</p>
    <img id="bso1" class="bso" src="http://ekladata.com/2XatlKix5QRZQ3lmej6rAnMbd4Q.jpg" alt="" /> <img id="bso2" class="bso" src="http://ekladata.com/YN35BgK_cahSg7RZJmAepIKt-uQ.jpg" alt="" /> <img id="bso3" class="bso" src="http://ekladata.com/6WeKKeDvC7tgpEtXvlfLeJ-ktK8.jpg" alt="" /> <img id="bso4" class="bso" src="http://ekladata.com/OZkCpsw1FcvfQebppTrZTz8rAMs.jpg" alt="" /> <img id="bso5" class="bso" src="http://ekladata.com/R3BwX5fkArvZdfB6Fj2HG-Ac42M.jpg" alt="" /> <img id="bso6" class="bso" src="http://ekladata.com/siDIkMw4lioZgeUTHN72E1c4rQA.jpg" alt="" /></div>
    <style><!--
    #deco1{position:absolute; z-index:1; width:1000px; height:80px; background:rgba(0,0,0,0.5);transform:translate(0px,0px);}
    .bso{position:absolute; z-index:1; width:1000px; height:563px; filter:grayscale(1);transition:all 1s linear, filter 1s linear 1s;}
    #bso1{clip-path:polygon(100px 10px, 170px 10px, 170px 70px, 100px 70px);}
    #bso2{clip-path:polygon(240px 10px, 370px 10px, 370px 70px, 240px 70px);}
    #bso3{clip-path:polygon(380px 10px, 450px 10px, 450px 70px, 380px 70px);}
    #bso4{clip-path:polygon(520px 10px, 590px 10px, 590px 70px, 520px 70px);}
    #bso5{clip-path:polygon(660px 10px, 730px 10px, 730px 70px, 660px 70px);}
    #bso6{clip-path:polygon(800px 10px, 870px 10px, 870px 70px, 800px 70px);}
    #bso1:hover,#bso2:hover,#bso3:hover,#bso4:hover,#bso5:hover,#bso6:hover{z-index:5; clip-path:polygon(0px 0px, 1000px 0px, 1000px 563px, 0px 563px); filter:grayscale(0);}
    --></style>