• Montage 266

    1 + 6 images au ratio 16/9, à survoler.  Exemple en 80vw par 45vw, code en 900px par 506px.

     


    <div style="width: 900px; height: 506px; margin: 1vh auto; border: 2px solid black; background: url('http://ekladata.com/Z80j0f-dRwenlsO3zDOGvCTbOMk.jpg'); background-size: cover; text-align: left;">
    <p id="zomb">&nbsp;</p>
    <img id="plat1" class="plat" src="http://ekladata.com/2R8UfuORzfTLRmXEIqytfoR2UfA.jpg" alt="" /> <img id="plat2" class="plat" src="http://ekladata.com/9Zql7S0XigpxULWutH0z3J9vp3Q.jpg" alt="" /> <img id="plat3" class="plat" src="http://ekladata.com/RbO3klFWLG7hMqvkEwiHgfg6WSM.jpg" alt="" /> <img id="plat4" class="plat" src="http://ekladata.com/LCIomZ_YlTL972kcRP5H00XWtXQ.jpg" alt="" /> <img id="plat5" class="plat" src="http://ekladata.com/jP4CkuHotweswAJPwDOFT4WqPWU.jpg" alt="" /> <img id="plat6" class="plat" src="http://ekladata.com/e9lmIFzFGimZd6XWihhKMlPdoSA.jpg" alt="" /></div>
    <style><!--
    #zomb{position:absolute; z-index:1; width:80px; height:506px; background:rgba(0,0,0,0.3); transform:translate(820px,0px);}
    .plat{position:absolute; z-index:3; width:900px; height:506px; transition:all 1s linear;}
    #plat1{clip-path: polygon(96% 5%,96% 5%, 99% 12%, 93% 12%);}
    #plat2{clip-path: polygon(93% 20%,99% 20%, 96% 27%, 96% 27%);}
    #plat3{clip-path: polygon(96% 35%,96% 35%, 99% 42%, 93% 42%);}
    #plat4{clip-path: polygon(93% 50%,99% 50%, 96% 57%, 96% 57%);}
    #plat5{clip-path: polygon(96% 65%,96% 65%, 99% 72%, 93% 72%);}
    #plat6{clip-path: polygon(93% 80%,99% 80%, 96% 87%, 96% 87%);}
    #plat1:hover,#plat2:hover,#plat3:hover,#plat4:hover,#plat5:hover,#plat6:hover{z-index:5; clip-path: polygon(0% 0%,100% 0%, 100% 100%, 0% 100%);}
    --></style>