• Montage 60

    Images au ratio 16/9.

     

    Clic maintenu.

     

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; background: linear-gradient(to bottom, rgba(0,100,150,0.8) 0%, rgba(255,255,100,0.3) 100%); margin: 1vh auto;">
    <p id="fd">&nbsp;</p>
    <p id="exp">Clic maintenu.</p>
    <p id="zn1" class="zn">&nbsp;</p>
    <p id="zn2" class="zn">&nbsp;</p>
    <p id="zn3" class="zn">&nbsp;</p>
    <p id="zn4" class="zn">&nbsp;</p>
    <p id="zn5" class="zn">&nbsp;</p>
    <p id="zn6" class="zn">&nbsp;</p>
    <p id="zn7" class="zn">&nbsp;</p>
    <p id="zn8" class="zn">&nbsp;</p>
    <p id="zn9" class="zn">&nbsp;</p>
    <p id="zn10" class="zn">&nbsp;</p>
    </div>

    <style><!--
    #fd{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/ab88MAEo-LQc956L7U7x9p9UaK0.jpg'); background-size:cover; opacity:0.5;}
    #exp{position:absolute; z-index:1; width:12vw; text-align:center; font-size:1.5vw; text-shadow:0.1vh 0.1vh black; color:white;}
    .zn{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.3vh solid white; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition:all 1s linear;}
    #zn1{background:url('http://ekladata.com/CwEQsxtepUy87BRiwjvTenKrJyI.jpg'); background-size: cover; transform:translate(30vw,5vw);}
    #zn2{background:url('http://ekladata.com/TfSVGEaxtQgKZCnh2E_E-X9erhQ.jpg'); background-size: cover; transform:translate(25vw,8vw);}
    #zn3{background:url('http://ekladata.com/-G8tFonCbX74QpIkGaRHTh4pN4Y.jpg'); background-size: cover; transform:translate(20vw,11vw);}
    #zn4{background:url('http://ekladata.com/DxfZgw_zWEz9oosNU5-fGEYH47c.jpg'); background-size: cover; transform:translate(15vw,14vw);}
    #zn5{background:url('http://ekladata.com/uXARIEADMuMYm7Dxyz7Lnz9oFko.jpg'); background-size: cover; transform:translate(10vw,17vw);}
    #zn6{background:url('http://ekladata.com/v5g-ivtw_V1dSzybosR2zT4nQJc.jpg'); background-size: cover; transform:translate(5vw,20vw);}
    #zn7{background:url('http://ekladata.com/wDof50Dj4hlojHKgCFc_iq5cOvM.jpg'); background-size: cover; transform:translate(48vw,17vw);}
    #zn8{background:url('http://ekladata.com/5klVqAaUZJF3W0HPtgLjQ-rYs6g.jpg'); background-size: cover; transform:translate(43vw,20vw);}
    #zn9{background:url('http://ekladata.com/FVNxKUj05n5NurDiOJaFxngySrI.jpg'); background-size: cover; transform:translate(38vw,23vw);}
    #zn10{background:url('http://ekladata.com/xX-g1cOopXlXUYVsTtvBZCELyao.jpg'); background-size: cover; transform:translate(33vw,26vw);}
    #zn1:active,#zn2:active,#zn3:active,#zn4:active,#zn5:active,#zn6:active,#zn7:active,#zn8:active,#zn9:active,#zn10:active{z-index:10; width:60vw; height:33.75vw; border:none; -webkit-clip-path: polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%); clip-path: polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%); transform:translate(0vw,0vw);}
    --></style>