Mont2.11.6.23

6 images au ratio 16/9, en 1200x675px.

S U R V O L

<div style="width: 1200px; height: 675px; margin: 30px auto; text-align: left;">
<p id="fd0">S U R V O L</p>
<img id="fd1" class="fd" src="http://ekladata.com/gHYEe1hE1NEzcQXLsUagjTJuqok.jpg" alt="" /> <img id="fd2" class="fd" src="http://ekladata.com/IHjdx8GgJ9xNsBg6ugwfuVpu1es.jpg" alt="" /> <img id="fd3" class="fd" src="http://ekladata.com/ambi4gabt9vVVnUZRkzEBJ_7la0.jpg" alt="" /> <img id="fd4" class="fd" src="http://ekladata.com/sWbftxWRzFbqg7pw5lm5UZZqfiw.jpg" alt="" /> <img id="fd5" class="fd" src="http://ekladata.com/4OkSTJ89bVTo7Bz6nww2UZFP1TA.jpg" alt="" /> <img id="fd6" class="fd" src="http://ekladata.com/DGVFTsipkpTJv0ubcR73jV01ax4.jpg" alt="" /></div>
<style><!--
#fd0{position:absolute; z-index:1; width:150px; height:30px; font-size:20px; color:red; transform:translate(50px,348px) rotate(-21deg);}
.fd{position:absolute; z-index:1; width:1200px; height:675px; box-shadow:inset 4px 4px 8px black, inset -4px -4px 8px white; filter:grayscale(1); transition:all 1s 0s, filter 0.5s 1s;}
#fd1{clip-path:polygon(0px 0px, 380px 0px, 380px 250px, 0px 400px);}
#fd2{clip-path:polygon(0px 420px, 380px 270px, 380px 675px, 0px 675px);}
#fd3{clip-path:polygon(410px 0px, 790px 0px, 790px 400px, 410px 250px);}
#fd4{clip-path:polygon(410px 270px, 790px 420px, 790px 675px, 410px 675px);}
#fd5{clip-path:polygon(820px 0px, 1200px 0px, 1200px 250px, 820px 400px);}
#fd6{clip-path:polygon(820px 420px, 1200px 270px, 1200px 675px, 820px 675px);}
#fd1:hover,#fd2:hover,#fd3:hover,#fd4:hover,#fd5:hover,#fd6:hover{z-index:5; clip-path:polygon(0px 0px, 1200px 0px, 1200px 675px, 0px 675px); filter:grayscale(0); transform:translate(0px,0px);}
--></style>