• Montage 277

    7 images au ratio 16/9. survol jusqu'à coloration.


    <div style="width: 900px; height: 506px; border: 4px ridge white; margin: 1vh auto; background: url('http://ekladata.com/GIF4GfUV7ZcpxyrWUuDII2uOysw.jpg'); background-size: cover; text-align: left;"><img id="cht1" class="cht" src="http://ekladata.com/IodsvTsu5XxMt0F0xb661hP7MHI.jpg" alt="" /> <img id="cht2" class="cht" src="http://ekladata.com/ItqP85xwxWZquFbAPmH9xolVnQ8.jpg" alt="" /> <img id="cht3" class="cht" src="http://ekladata.com/XEPwkuqlVM8VEblv4tR6-6tRoYs.jpg" alt="" /> <img id="cht4" class="cht" src="http://ekladata.com/dRhE2r4jZTvajvPFVeSMp8wo5CU.jpg" alt="" /> <img id="cht5" class="cht" src="http://ekladata.com/xMvjgHkZG2Lp9D66oXozD-lJylg.jpg" alt="" /> <img id="cht6" class="cht" src="http://ekladata.com/xqqMZ7P717sYoNOz-QSW09LoP-U.jpg" alt="" /></div>
    <style><!--
    .cht{position:absolute; z-index:1; width:50px; height:50px; border:2px solid white; filter:grayscale(1); transition:all 1s linear, filter 1s linear 1s;}
    #cht1{transform:translate(20px,10px) skewx(20deg) ;}
    #cht2{transform:translate(100px,10px) skewx(20deg);}
    #cht3{transform:translate(20px,80px) skewx(20deg);}
    #cht4{transform:translate(750px,10px) skewx(20deg) ;}
    #cht5{transform:translate(820px,10px) skewx(20deg);}
    #cht6{transform:translate(820px,80px) skewx(20deg) ;}
    #cht1:hover,#cht2:hover,#cht3:hover,#cht4:hover,#cht5:hover,#cht6:hover{z-index:5; width:900px; height:506px; border:none; border-radius:0%; filter:grayscale(0); transform:translate(0vw,0vw);}
    --></style>