• Exemple 120

     5 images, au ratio 16/9, dimensionnées en 60vw/33.75vw soit 60% de la largeur de votre écran.

    Survol.

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="ois0">Survol.</p>
    <p id="ois1" class="ois">&nbsp;</p>
    <p id="ois2" class="ois">&nbsp;</p>
    <p id="ois3" class="ois">&nbsp;</p>
    <p id="ois4" class="ois">&nbsp;</p>
    <p id="ois5" class="ois">&nbsp;</p>
    </div>

    <style><!--
    #ois0{position:absolute; z-index:1; width:20vw; font-size:2vw; text-shadow:0.1vh 0.1vh black; color:grey; transform:translate(20vw,25vw);}
    .ois{position:absolute; z-index:1; width:60vw; height:33.75vw; filter:grayscale(1); transition:all 1s linear 0s, filter 1s linear 1s;}
    #ois1{background:url('http://ekladata.com/6SRh8-i1E3r2ta7MWmUIIZMYuYA.jpg');background-size:60vw 33.75vw; clip-path:polygon(10vw 2vw,20vw 2vw,24vw 8.5vw,20vw 16vw, 10vw 16vw, 6vw 8.5vw);}
    #ois2{background:url('http://ekladata.com/5AzK76zeqxc84gK-hy4UAX1MSs0.jpg');background-size:60vw 33.75vw; clip-path:polygon(10vw 17vw,20vw 17vw,24vw 23.5vw,20vw 31vw, 10vw 31vw, 6vw 23.5vw);}
    #ois3{background:url('http://ekladata.com/42ngHLWDFhEnxNt5HqKcJbJwWiY.jpg');background-size:60vw 33.75vw; clip-path:polygon(25vw 9vw,35vw 9vw,39vw 16.5vw,35vw 23vw, 25vw 23vw, 21vw 16.5vw);}
    #ois4{background:url('http://ekladata.com/9_X4aat5wOb_l_vWeFfwhsgGUFM.jpg');background-size:60vw 33.75vw; clip-path:polygon(40vw 2vw,50vw 2vw,54vw 8.5vw,50vw 16vw, 40vw 16vw, 36vw 8.5vw);}
    #ois5{background:url('http://ekladata.com/Svq4rgjR1mnwvK7VQrkskT4u-pM.jpg');background-size:60vw 33.75vw; clip-path:polygon(40vw 17vw,50vw 17vw,54vw 23.5vw,50vw 31vw, 40vw 31vw, 36vw 23.5vw);}
    #ois1:hover,#ois2:hover,#ois3:hover,#ois4:hover,#ois5:hover{z-index:5; clip-path:polygon(0vw 0vw,60vw 0vw,60vw 17vw,60vw 33.75vw, 0vw 33.75vw, 0vw 17vw); filter:grayscale(0);}
    --></style>