• Exemple 35

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

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="per1" class="per">&nbsp;</p>
    <p id="per2" class="per">&nbsp;</p>
    <p id="per3" class="per">&nbsp;</p>
    <p id="per4" class="per">&nbsp;</p>
    <p id="per5" class="per">&nbsp;</p>
    <p id="per6" class="per">&nbsp;</p>
    </div>

    <style><!--
    .per{position:absolute; z-index:1; box-shadow:inset -0.4vh -0.4vh 0.8vh white, inset 0.4vh 0.4vh 0.8vh black; transition:all 1s linear;}
    #per1{ width:31vw; height:7vw; background:url('http://ekladata.com/s0u9ja0XiGqg14-TsDszg9YZeYM@1152x648.jpg'); background-position:-14.5vw 0.5vw; transform:translate(14.5vw,0.5vw) perspective(20vw) rotateX(53deg); transform-origin:center bottom;}
    #per2{ width:40vw; height:7vw; background:url('http://ekladata.com/5CDCIG1cslF3jRtJAGD4tWH5mjA@1152x648.jpg'); background-position:-10vw -5vw; transform:translate(10vw,5vw) perspective(20vw) rotateX(45deg); transform-origin:center bottom;}
    #per3{ width:50vw; height:7vw; background:url('http://ekladata.com/4rtnd1kcV9p0VRH7SBOAC-6Klyk@1152x648.jpg'); background-position:-5vw -10vw; transform:translate(5vw,10vw) perspective(20vw) rotateX(40deg); transform-origin:center bottom;}
    #per4{ width:50vw; height:7vw; background:url('http://ekladata.com/pX6oJZE-TEEpvAPKUqDDlL0rHOw@1152x648.jpg'); background-position:-5vw -17.5vw; transform:translate(5vw,17.5vw) perspective(20vw) rotateX(-40deg); transform-origin:center top;}
    #per5{ width:40vw; height:7vw; background:url('http://ekladata.com/I2IvUToHC8VQ88vlMRwYCaz8bKQ@1152x648.jpg'); background-position:-10vw -22.5vw; transform:translate(10vw,22.5vw) perspective(20vw) rotateX(-45deg); transform-origin:center top;}
    #per6{ width:31vw; height:7vw; background:url('http://ekladata.com/NVw6jmHsoPGopMWZIIGc-saQlDY@1152x648.jpg'); background-position:-14.5vw -27vw; transform:translate(14.5vw,27vw) perspective(20vw) rotateX(-53deg); transform-origin:center top;}
    #per1:hover,#per2:hover,#per3:hover,#per4:hover,#per5:hover,#per6:hover{z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw) perspective(200vw) rotateX(0deg);}
    --></style>