• Montage 255

    1 + 6 images au ratio 16/9, à survoler. 

     

     

    <div style="width: 1000px; height: 563px; margin: 5px auto; background: url('http://ekladata.com/u07-HCZYEZJEW_yYP6fJWEyUJbc.jpg'); background-size: cover; border: 2px solid grey; text-align: left;">
    <p id="dec1" class="dec">&nbsp;</p>
    <p id="dec2" class="dec">&nbsp;</p>
    <img id="bs1" class="bs" src="http://ekladata.com/HznxROh7rm4bAxLmcXfU003YvJo.jpg" alt="" /> <img id="bs2" class="bs" src="http://ekladata.com/9UKBuzrLPD90qKiD7a80mJOwF-A.jpg" alt="" /> <img id="bs3" class="bs" src="http://ekladata.com/asbP99_Ddsy48w9jZg9d_523EIw.jpg" alt="" /> <img id="bs4" class="bs" src="http://ekladata.com/bLiU5ZYGr4_bFm8-ooKQffKzh5o.jpg" alt="" /> <img id="bs5" class="bs" src="http://ekladata.com/duJl9zSfq9T89hYM56OsB6eM1W4.jpg" alt="" /> <img id="bs6" class="bs" src="http://ekladata.com/sfUpMdBzmW2LKBEK4lBm_Y_JMoE.jpg" alt="" /></div>
    <style><!--
    .dec{position:absolute; z-index:1; width:100px; height:563px; background:rgba(0,0,0,0.7);}
    #dec1{transform:translate(0px,0px);}
    #dec2{transform:translate(900px,0px);}
    .bs{position:absolute; z-index:1; width:1000px; height:563px; transition:all 1s linear;}
    #bs1{clip-path:polygon(10px 50px, 90px 50px, 90px 130px, 10px 130px);}
    #bs2{clip-path:polygon(10px 240px, 90px 240px, 90px 320px, 10px 320px);}
    #bs3{clip-path:polygon(10px 400px, 90px 400px, 90px 480px, 10px 480px);}
    #bs4{clip-path:polygon(910px 50px, 990px 50px, 990px 130px, 910px 130px);}
    #bs5{clip-path:polygon(910px 240px, 990px 240px, 990px 320px, 910px 320px);}
    #bs6{clip-path:polygon(910px 400px, 990px 400px, 990px 480px, 910px 480px);}
    #bs1:hover,#bs2:hover,#bs3:hover,#bs4:hover,#bs5:hover,#bs6:hover{z-index:5; clip-path:polygon(0px 0px, 1000px 0px, 1000px 563px, 0px 563px);}
    --></style>