• Montage 306

     Un montage simple pour 5 images au ratio 16/9.

    Survol

     

     

     

     

     

    <div style="width: 900px; height: 506px; margin: 5px auto; text-align: left; border: 1px solid black; background: linear-gradient(45deg, rgba(8,110,98,1) 0%, rgba(181,255,251,1) 50%, rgba(8,110,98,1) 100%);">
    <p id="ferm0">Survol</p>
    <p id="ferm1" class="ferm">&nbsp;</p>
    <p id="ferm2" class="ferm">&nbsp;</p>
    <p id="ferm3" class="ferm">&nbsp;</p>
    <p id="ferm4" class="ferm">&nbsp;</p>
    <p id="ferm5" class="ferm">&nbsp;</p>
    </div>
    <style><!--
    #ferm0{position:absolute; z-index:1; width:110px; font-size:30px; color:white; text-shadow:0.2vh 0.2vh black; transform:translate(400px,50px);}
    .ferm{position:absolute; z-index:1; width:900px; height:506px; filter:grayscale(1); transition:all 1s linear 0s, filter 1s linear 1s;}
    #ferm1{background:url('http://ekladata.com/_Q-pacOl6eyuwICDA7wCSo1M8NI.jpg'); background-size:900px 506px; clip-path:polygon(30% 30%, 70% 30%, 70% 70%, 30% 70%);}
    #ferm2{background:url('http://ekladata.com/Bv5f0Z5h0mMqVhcak17Xri6LaAs.jpg'); background-size:900px 506px; clip-path:polygon(0% 0%, 40% 0%, 40% 40%, 0% 40%);}
    #ferm3{background:url('http://ekladata.com/WXYBA__8g0jsDiSo6YYITbXEfts.jpg'); background-size:900px 506px; clip-path:polygon(60% 0%, 100% 0%, 100% 40%, 60% 40%);}
    #ferm4{background:url('http://ekladata.com/4AoRrAPwOLWg3KWNJTfJfLGInto.jpg'); background-size:900px 506px; clip-path:polygon(60% 60%, 100% 60%, 100% 100%, 60% 100%);}
    #ferm5{background:url('http://ekladata.com/1d1sSl5bN0tVVXKwaREA-CDBna0.jpg'); background-size:900px 506px; clip-path:polygon(0% 60%, 40% 60%, 40% 100%, 0% 100%);}
    #ferm1:hover,#ferm2:hover,#ferm3:hover,#ferm4:hover,#ferm5:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); filter:grayscale(0);}
    --></style>