Montage 98

11 images horizontales au ratio 16/9; clic maintenu.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; background: white;">
<p id="sec1">&nbsp;</p>
<p id="sec2">&nbsp;</p>
<p id="sec3">&nbsp;</p>
<p id="sec4">&nbsp;</p>
<p id="sec5">&nbsp;</p>
<p id="sec6">&nbsp;</p>
<p id="sec7">&nbsp;</p>
<p id="sec8">&nbsp;</p>
<p id="sec9">&nbsp;</p>
<p id="sec10">&nbsp;</p>
<p id="sec11">&nbsp;</p>
</div>

<style><!--
#sec1{position:absolute; z-index:1; width:19vw; height:19vw; background:url('http://ekladata.com/dnUjmM8-KFXn8Dqx9bCOaFAp-Y4.jpg'); background-size:60vw 33.75vw; background-position:-0.5vw -6.5vw; transform:translate(0.5vw,6.5vw); -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transition:all 1s linear;}
#sec2{position:absolute; z-index:1; width:19vw; height:19vw; background:url('http://ekladata.com/t77Y7TLn_U9j5eSAEb_kkhTBPuo.jpg'); background-size:60vw 33.75vw; background-position:-20.5vw -6.5vw; transform:translate(20.5vw,6.5vw); -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transition:all 1s linear;}
#sec3{position:absolute; z-index:1; width:19vw; height:19vw; background:url('http://ekladata.com/QiqUvv1FoKQ79k5iSpeFMZRXgUg.jpg'); background-size:60vw 33.75vw; background-position:-40.5vw -6.5vw; transform:translate(40.5vw,6.5vw); -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transition:all 1s linear;}
#sec4{position:absolute; z-index:1; width:20vw; height:20vw; background:url('http://ekladata.com/5Av1PVQTEY2LhdnZ1_oQ2OSmmv4.jpg'); background-size:60vw 33.75vw; background-position:-10vw 0vw; transform:translate(10vw,0vw); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 50% 80%, 0% 30%);clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 50% 80%, 0% 30%); transition:all 1s linear;}
#sec5{position:absolute; z-index:1; width:20vw; height:20vw; background:url('http://ekladata.com/f7NmR1OEtnBx5bhxmm83RmUcgnY.jpg'); background-size:60vw 33.75vw; background-position:-30vw 0vw; transform:translate(30vw,0vw); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 50% 80%, 0% 30%);clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 50% 80%, 0% 30%); transition:all 1s linear;}
#sec6{position:absolute; z-index:1; width:20vw; height:17.75vw; background:url('http://ekladata.com/bfMfIacf_awkoJAvS2um0fnwXiY.jpg'); background-size:60vw 33.75vw; background-position:-10vw -16vw; transform:translate(10vw,16vw); -webkit-clip-path: polygon(0% 56.75%, 50% 0%, 100% 56.75%, 100% 100%, 0% 100%);clip-path: polygon(0% 56.75%, 50% 0%, 100% 56.75%, 100% 100%, 0% 100%); transition:all 1s linear;}
#sec7{position:absolute; z-index:1; width:20vw; height:17.75vw; background:url('http://ekladata.com/HnoWKhy9TCq7hCocgrTVZTk9aMA.jpg'); background-size:60vw 33.75vw; background-position:-30vw -16vw; transform:translate(30vw,16vw); -webkit-clip-path: polygon(0% 56.75%, 50% 0%, 100% 56.75%, 100% 100%, 0% 100%);clip-path: polygon(0% 56.75%, 50% 0%, 100% 56.75%, 100% 100%, 0% 100%); transition:all 1s linear;}
#sec8{position:absolute; z-index:1; width:10vw; height:16vw; background:url('http://ekladata.com/2YBcWMNsU126Mn1HgsWNna414UI.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 37.5%, 0% 100%);clip-path: polygon(0% 0%, 100% 0%, 100% 37.5%, 0% 100%); transition:all 1s linear;}
#sec9{position:absolute; z-index:1; width:10vw; height:16vw; background:url('http://ekladata.com/zdH7hi15UeM8V7Q4LVLn_eouVzY.jpg'); background-size:60vw 33.75vw; background-position:-50vw 0vw; transform:translate(50vw,0vw); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 37.5%);clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 37.5%); transition:all 1s linear;}
#sec10{position:absolute; z-index:1; width:10vw; height:17.75vw; background:url('http://ekladata.com/620KO96PxNAQ0-hVzqtBjmcuBIA.jpg'); background-size:60vw 33.75vw; background-position:0vw -16vw; transform:translate(0vw,16vw); -webkit-clip-path: polygon(0% 0%, 100% 56.75%, 100% 100%, 0% 100%);clip-path: polygon(0% 0%, 100% 56.75%, 100% 100%, 0% 100%); transition:all 1s linear;}
#sec11{position:absolute; z-index:1; width:10vw; height:17.75vw; background:url('http://ekladata.com/tlXv2-r5EE0CwbgQ6DTJy2lJNv0.jpg'); background-size:60vw 33.75vw; background-position:-50vw -16vw; transform:translate(50vw,16vw); -webkit-clip-path: polygon(0% 56.75%, 100% 0%, 100% 100%, 0% 100%);clip-path: polygon(0% 56.75%, 100% 0%, 100% 100%, 0% 100%); transition:all 1s linear;}
#sec1:active,#sec2:active,#sec3:active,#sec8:active,#sec9:active,#sec10:active,#sec11:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
#sec4:active,#sec5:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw);-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); background-position:0vw 0vw; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);}
#sec6:active,#sec7:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw; -webkit-clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 100%, 0% 100%);clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>