• Exemple 55

    5 images en 1152x648 (16x9), à survoler, redimensionnées par le code.

    L'utilisation des unités viewport (vw) semble simplifier l'écriture du clip et du positionnement du fond.


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left; border: 0.1vh solid black; background: white;"><img id="bret1" class="bret" src="http://ekladata.com/sQ6al8MyqGeBBMp99ty4O4gvFco@1152x648.jpg" alt="" /> <img id="bret2" class="bret" src="http://ekladata.com/DrYCbValB7WPI5ZgN7rKhwGfdY8@1152x648.jpg" alt="" /> <img id="bret3" class="bret" src="http://ekladata.com/I4yiixyj0P3-HZY8OJqBmy6CoXU@1152x648.jpg" alt="" /> <img id="bret4" class="bret" src="http://ekladata.com/jFaslNf-s6-s-ZX6tvjrPZYwYQI@1152x648.jpg" alt="" /> <img id="bret5" class="bret" src="http://ekladata.com/7cbjL6XX3VUstPzSw1F_s00-pNo@1152x648.jpg" alt="" /></div>

    <style><!--
    .bret{position:absolute; z-index:1; width:60vw; height:33.75vw; transition:all 1s linear;}
    #bret1{clip-path: polygon(1vw 1vw, 29vw 1vw, 18vw 16.5vw, 1vw 16.5vw); background-position:1vw 1vw);}
    #bret2{clip-path: polygon(31vw 1vw, 59vw 1vw, 59vw 16.5vw, 41vw 16.6vw); background-position:31vw 1vw);}
    #bret3{clip-path: polygon(41vw 17.5vw, 59vw 17.5vw, 59vw 32vw, 31vw 32vw); background-position:41vw 17.5vw);}
    #bret4{clip-path: polygon(1vw 17.5vw, 18vw 17.5vw, 29vw 32vw, 1vw 32vw); background-position:1vw 17.5vw);}
    #bret5{clip-path: polygon(30vw 2vw, 39.5vw 17vw, 30vw 31vw, 19.5vw 17vw); background-position:30vw 2vw);}
    #bret1:hover,#bret2:hover,#bret3:hover,#bret4:hover,#bret5:hover{z-index:5;clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw); background-position:0vw 0vw);}
    --></style>