• Paravent

     8 images au ratio 16/9. Survol

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; background: url('http://ekladata.com/ZBzq8aCaXnmyhZ5IFb0wcU-ekTk.jpg'); background-size: cover;">
    <p id="para1" class="para">&nbsp;</p>
    <p id="para2" class="para">&nbsp;</p>
    <p id="para3" class="para">&nbsp;</p>
    <p id="para4" class="para">&nbsp;</p>
    <p id="para5" class="para">&nbsp;</p>
    <p id="para6" class="para">&nbsp;</p>
    <p id="para7" class="para">&nbsp;</p>
    <p id="para8" class="para">&nbsp;</p>
    </div>

    <style><!--
    .para{position:absolute; z-index:1; width:7.5vw; height:20vw; border:0.4vh solid white; background-size:60vw 33.75vw; border-top-left-radius:50% 15%; border-top-right-radius:50% 15%;filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, filter 1s linear 1s;}
    #para1{box-sizing:border-box; background:url('http://ekladata.com/zRDk6TYQel4znOOVhvvQvqIoQLM.jpg'); transform:translate(0vw,12vw) skewy(20deg);}
    #para2{box-sizing:border-box; background:url('http://ekladata.com/BBnllZjDewUAYBJEJhmw9Ri3Rpg.jpg'); transform:translate(7.5vw,12vw) skewy(-20deg);}
    #para3{box-sizing:border-box; background:url('http://ekladata.com/7v6fWX8N7Ic572eSU4-KINUDNt0.jpg'); transform:translate(15vw,12vw) skewy(20deg);}
    #para4{box-sizing:border-box; background:url('http://ekladata.com/Oqa3MOEAHCwzFmknKfqaP9DMimM.jpg'); transform:translate(22.5vw,12vw) skewy(-20deg);}
    #para5{box-sizing:border-box; background:url('http://ekladata.com/8WqWdCzrOiJ9bm-QwpFTXaUwPlM.jpg'); transform:translate(30vw,12vw) skewy(20deg);}
    #para6{box-sizing:border-box; background:url('http://ekladata.com/40godERGNl1ax3OPQmERceZxVmE.jpg'); transform:translate(37.5vw,12vw) skewy(-20deg);}
    #para7{box-sizing:border-box; background:url('http://ekladata.com/BRyoLnOe3u0dAeCdqsDR_fJyz3w.png'); transform:translate(45vw,12vw) skewy(20deg);}
    #para8{box-sizing:border-box; background:url('http://ekladata.com/rNSImC5ppbCFO3unIr58_AS9YpM.jpg'); transform:translate(52.5vw,12vw) skewy(-20deg);}
    #para1:hover,#para2:hover,#para3:hover,#para4:hover,#para5:hover,#para6:hover,#para7:hover,#para8:hover{z-index:5; width:60vw; height:33.75vw; background-size:cover; border-top-left-radius:0% 0%; border-top-right-radius:0% 0%; background-position:0vw 0vw; filter:grayscale(0); transform:translate(0vw,0vw) skewy(0deg);}
    --></style>