zig zag

...

 

<div style="width: 60vw; height: 33.75vw; border: 0.3vh ridge grey; margin: 1vh auto; text-align: left;">
<p id="fd">&nbsp;</p>
<input id="clip1" class="clip" type="text" /> <input id="clip2" class="clip" type="text" /> <input id="clip3" class="clip" type="text" /> <input id="clip4" class="clip" type="text" /> <input id="clip5" class="clip" type="text" /> <input id="clip6" class="clip" type="text" /> <input id="clip7" class="clip" type="text" /> <img id="gde1" class="gde" src="http://ekladata.com/bgo_OlfB4-VXs_s9zVoq5ZEoncY.jpg" alt="" /> <img id="gde2" class="gde" src="http://ekladata.com/w5CbACGiUgvLjQRGVpW33pu-z44.jpg" alt="" /> <img id="gde3" class="gde" src="http://ekladata.com/AI4N-3FmgQvZqVkLgjVCYTd0dGw.jpg" alt="" /> <img id="gde4" class="gde" src="http://ekladata.com/De7ZpOY2OwiY8UO0jtduVN4JjWU.jpg" alt="" /> <img id="gde5" class="gde" src="http://ekladata.com/oenGjzpqUGfqA4lHzXUbdAbEhfo.jpg" alt="" /> <img id="gde6" class="gde" src="http://ekladata.com/X68izCcN8uiiE1XnzhHAL_co8GI.jpg" alt="" /> <img id="gde7" class="gde" src="http://ekladata.com/3w84zDW9wgbNQTmXkPG_VTS5j7E.jpg" alt="" /></div>
<style><!--
#fd{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/QjfpkYnqr63ma7EC4BgaEim6WqQ.jpg'); background:size:cover; opacity:0.3; -webkit-filter:grayscale(1); filter:grayscale(1);}
.clip{position:absolute; z-index:2; width:60vw; height:33.75vw; background:url('http://ekladata.com/QjfpkYnqr63ma7EC4BgaEim6WqQ.jpg'); background-size:60vw 33.75vw; transform:translate(0vw,0vw);}
#clip1{-webkit-clip-path: polygon(0 0, 0 28.75vw, 10vw 0); clip-path: polygon(0 0, 0 28.75vw, 10vw 0);}
#clip2{-webkit-clip-path: polygon(0vw 33.75vw, 10vw 5vw, 25vw 33.75vw); clip-path: polygon(0vw 33.75vw, 10vw 5vw, 20vw 33.75vw);}
#clip3{-webkit-clip-path: polygon(10vw 0vw, 20vw 28.75vw, 30vw 0vw); clip-path: polygon(10vw 0vw, 20vw 28.75vw, 30vw 0vw);}
#clip4{-webkit-clip-path: polygon(20vw 33.75vw, 30vw 5vw, 40vw 33.75vw); clip-path: polygon(20vw 33.75vw, 30vw 5vw, 40vw 33.75vw);}
#clip5{-webkit-clip-path: polygon(30vw 0vw, 40vw 28.75vw, 50vw 0vw); clip-path: polygon(30vw 0vw, 40vw 28.75vw, 50vw 0vw);}
#clip6{-webkit-clip-path: polygon(40vw 33.75vw, 50vw 5vw, 60vw 33.75vw); clip-path: polygon(40vw 33.75vw, 50vw 5vw, 60vw 33.75vw);}
#clip7{-webkit-clip-path: polygon(50vw 0, 60vw 28.75vw, 60vw 0vw); clip-path: polygon(50vw 0, 60vw 28.75vw, 60vw 0vw);}
.gde{position:absolute; z-index:200; width:0vw; height:0vw; left:50vw; top:0vw; transition:all 1s linear;}

#clip1:focus ~ #gde1,#clip2:focus ~ #gde2,#clip3:focus ~ #gde3,#clip4:focus ~ #gde4,#clip5:focus ~ #gde5,#clip6:focus ~ #gde6,#clip7:focus ~ #gde7{width:100vw; height:56.25vw; left:0; top:0;}
--></style>

L'image de fond est ici en noir et blanc et en opacité de 30%.

Les triangles sont des éléments à cliquer (input) et comportent chacun une partie différente de l'image de fond par -webkit-clip-path/clip-path.

Chacun commande l'affichage d'une image, qui est au départ de largeur:0 et hauteur:0, placée au centre haut de l'écran (left:50vw; top:0;) et qui passe à la largeur et hauteur de votre écran.