• Exemple 16b

    6 images au ratio 16/9, redimensionnées dans le code en 1152x648px.

    Survol

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; text-align: left; margin: 1vh auto;">
    <p id="kk1" class="kk">&nbsp;</p>
    <p id="kk2" class="kk">&nbsp;</p>
    <p id="kk3" class="kk">&nbsp;</p>
    <p id="kk4" class="kk">&nbsp;</p>
    <p id="kk5" class="kk">&nbsp;</p>
    <p id="kk6" class="kk">&nbsp;</p>
    </div>

    <style><!--
    .kk{position:absolute; z-index:1; width:8vw; height:33.75vw; box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
    #kk1{background:url('http://ekladata.com/-_jnsh1S5c17EJnfTp7lcnzhSE0@1152x648.jpg'); background-size 60vw 33.75vw; background-position:-1vw 0vw; transform:translate(1vw,0vw);}
    #kk2{background:url('http://ekladata.com/L7wr6wItOlw-7CdyDP8fDatmuZc@1152x648.jpg'); background-size 60vw 33.75vw; background-position:-11vw 0vw; transform:translate(11vw,0vw);}
    #kk3{background:url('http://ekladata.com/2ukTZSgwxm4ww3580Ioly4nR7_g@1152x648.jpg'); background-size 60vw 33.75vw; background-position:-21vw 0vw; transform:translate(21vw,0vw);}
    #kk4{background:url('http://ekladata.com/P6gDyyTb-RFg1kIuWKtcSuNw1ks@1152x648.jpg'); background-size 60vw 33.75vw; background-position:-31vw 0vw; transform:translate(31vw,0vw);}
    #kk5{background:url('http://ekladata.com/QwjHtMaXm7deYTGlcZPrz7ykeKk@1152x648.jpg'); background-size 60vw 33.75vw; background-position:-41vw 0vw; transform:translate(41vw,0vw);}
    #kk6{background:url('http://ekladata.com/7HyJXmQS1FsOiQy51sXRrRoteGA@1152x648.jpg'); background-size 60vw 33.75vw; background-position:-51vw 0vw; transform:translate(51vw,0vw);}
    #kk1:hover,#kk2:hover,#kk3:hover,#kk4:hover,#kk5:hover,#kk6:hover{z-index:5; width:60vw; background-position:0vw 0vw; transform:translate(0vw,0vw); filter:grayscale(0);}
    --></style>