Montage 258

6 images au ratio 16/9 

Clic pour ouvrir et pour fermer

<div style="width: 900px; height: 563px; margin: 5px auto; text-align: left; border: 3px ridge grey; background: linear-gradient(to bottom, rgba(153,218,255,1) 0%, rgba(0,128,128,08) 100%);">
<input id="bg1" class="bg" type="text" />
<input id="bg2" class="bg" type="text" />
<input id="bg3" class="bg" type="text" />
<input id="bg4" class="bg" type="text" />
<input id="bg5" class="bg" type="text" />
<input id="bg6" class="bg" type="text" />
<img id="mtg1" class="mtg" src="http://ekladata.com/nFaa4MA03WAGRJmDHlpAyJiwAu8.jpg" alt="" />
<img id="mtg2" class="mtg" src="http://ekladata.com/a-z28toBISSvZdC5DOAv42x5tMk.jpg" alt="" />
<img id="mtg3" class="mtg" src="http://ekladata.com/yNC582wlc_VQiEicqY8526TwnWc.jpg" alt="" />
<img id="mtg4" class="mtg" src="http://ekladata.com/CrClQBJG3eB4m4ibreZe2ovxPkU.jpg" alt="" />
<img id="mtg5" class="mtg" src="http://ekladata.com/SvU8dnV0u2wrd7_6pFAhXVpDHkw.jpg" alt="" />
<img id="mtg6" class="mtg" src="http://ekladata.com/8saAgh80W0FlHfwYdX4RETlRFzs.jpg" alt="" />
<p id="clc">Clic pour ouvrir et pour fermer</p>
</div>

<style><!--
#clc{position:absolute; z-index:1; width:400px; font-size:25px; transform:translate(250px,0px);}
.bg{position:absolute; z-index:2; width:300px; height:200px; background:transparent; border:none;}
#bg1{transform:translate(0px,50px);}
#bg2{transform:translate(300px,50px);}
#bg3{transform:translate(600px,50px);}
#bg4{transform:translate(0px,300px);}
#bg5{transform:translate(300px,300px);}
#bg6{transform:translate(600px,300px);}
.mtg{position:absolute; z-index:1; width:300px; height:200px; filter:grayscale(1); clip-path: polygon(50% 0%, 61% 30%, 82% 30%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 18% 30%, 39% 30%); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s,clip-path 1s linear 1s, filter 1s linear 2s;}
#mtg1{transform:translate(0px,50px);}
#mtg2{transform:translate(300px,50px);}
#mtg3{transform:translate(600px,50px);}
#mtg4{transform:translate(0px,300px);}
#mtg5{transform:translate(300px,300px);}
#mtg6{transform:translate(600px,300px);}
#bg1:focus ~ #mtg1,#bg2:focus ~ #mtg2,#bg3:focus ~ #mtg3,#bg4:focus ~ #mtg4,#bg5:focus ~ #mtg5,#bg6:focus ~ #mtg6{z-index:5;width:900px; height:563px; filter:grayscale(0); transform:translate(0px,0px);clip-path: polygon(50% 0%, 100% 0%, 100% 35%, 100% 57%, 100% 100%, 50% 100%, 0% 100%, 0% 57%, 0% 35%, 0% 0%);}
#bg1:focus,#bg2:focus,#bg3:focus,#bg4:focus,#bg5:focus,#bg6:focus{opacity:0;}
--></style>