Montage 77

Article du 31/7/18: 6 images au ration 16/9.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
<p id="ds0">Survol puis clic maintenu.</p>
<p id="ds1">&nbsp;</p>
<p id="ds2">&nbsp;</p>
<p id="ds3">&nbsp;</p>
<p id="ds4">&nbsp;</p>
<p id="ds5">&nbsp;</p>
<p id="ds6">&nbsp;</p>
<p id="mg1">&nbsp;</p>
<p id="mg2">&nbsp;</p>
<p id="mg3">&nbsp;</p>
<p id="mg4">&nbsp;</p>
<p id="mg5">&nbsp;</p>
<p id="mg6">&nbsp;</p>
</div>

<style><!--
#ds0{position:absolute; z-index:1; box-sizing:border-box; border:0.6vh ridge grey; width:20vw; height:3.75vw; background:rgba(0,0,0,0.6); line-height:3.75vw; font-size:1.1vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(20vw,15vw);}
#ds1{position:absolute; z-index:1; box-sizing:border-box; border:0.6vh ridge grey; width:20vw; height:18.75vw; background:rgba(100,0,0,0.6); box-shadow:inset 0vw 0vw 8vw 1vw black; transform:translate(0vw,0vw);}
#ds2{position:absolute; z-index:1; box-sizing:border-box; border:0.6vh ridge grey; width:10vw; height:15vw; background:rgba(100,100,0,0.6); box-shadow:inset 0vw 0vw 8vw 1vw black; transform:translate(20vw,0vw);}
#ds3{position:absolute; z-index:1; box-sizing:border-box; border:0.6vh ridge grey; width:30vw; height:15vw; background:rgba(100,100,100,0.6); box-shadow:inset 0vw 0vw 8vw 1vw black; transform:translate(30vw,0vw);}
#ds4{position:absolute; z-index:1; box-shadow:inset 0vw 0vw 8vw 1vw black; box-sizing:border-box; border:0.6vh ridge grey; width:20vw; height:18.55vw; background:rgba(100,0,100,0.6); transform:translate(40vw,15vw);}
#ds5{position:absolute; z-index:1; box-shadow:inset 0vw 0vw 8vw 1vw black; box-sizing:border-box; border:0.6vh ridge grey; width:15vw; height:15vw; background:rgba(200,0,0,0.6); transform:translate(25vw,18.75vw);}
#ds6{position:absolute; z-index:1; box-shadow:inset 0vw 0vw 8vw 1vw black; box-sizing:border-box; border:0.6vh ridge grey; width:25vw; height:15vw; background:rgba(200,100,0,0.6); transform:translate(0vw,18.75vw);}
#mg1{position:absolute; z-index:2; box-sizing:border-box; border:0.6vh ridge grey; width:20vw; height:18.75vw; background:url('http://ekladata.com/AUcckB_MosWjRmufGTRJ9Pt8OTE.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw); opacity:0; transition:all 1s linear;}
#mg2{position:absolute; z-index:2; box-sizing:border-box; border:0.6vh ridge grey; width:10vw; height:15vw; background:url('http://ekladata.com/tjeJpfL_IaOtkJHjWEFQ4r2x6HU.jpg'); background-size:60vw 33.75vw; background-position:-20vw 0vw; transform:translate(20vw,0vw); opacity:0; transition:all 1s linear;}
#mg3{position:absolute; z-index:2; box-sizing:border-box; border:0.6vh ridge grey; width:30vw; height:15vw; background:url('http://ekladata.com/l4a7bBCT1zhiFth40JVRvFSvkww.jpg'); background-size:60vw 33.75vw; background-position:-30vw 0vw; transform:translate(30vw,0vw); opacity:0; transition:all 1s linear;}
#mg4{position:absolute; z-index:2; box-sizing:border-box; border:0.6vh ridge grey; width:20vw; height:18.75vw; background:url('http://ekladata.com/ais5DNFB75fhEIZbRDOLV4MYxfw.jpg'); background-size:60vw 33.75vw; background-position:-40vw -15vw; transform:translate(40vw,15vw); opacity:0;transition:all 1s linear;}
#mg5{position:absolute; z-index:2; box-sizing:border-box; border:0.6vh ridge grey; width:15vw; height:15vw; background:url('http://ekladata.com/k4tGeCCFgu1Cfb68hMXD4HIKkxE.jpg'); background-size:60vw 33.75vw; background-position:-25vw -18.75vw; transform:translate(25vw,18.75vw); opacity:0;transition:all 1s linear;}
#mg6{position:absolute; z-index:2; box-sizing:border-box; border:0.6vh ridge grey; width:25vw; height:15vw; background:url('http://ekladata.com/axuTIxIK4A8fz2mKXiMuLMuDnhU.jpg'); background-size:60vw 33.75vw; background-position:0vw -18.75vw; transform:translate(0vw,18.75vw); opacity:0;transition:all 1s linear;}

#mg1:hover,#mg2:hover,#mg3:hover,#mg4:hover,#mg5:hover,#mg6:hover{opacity:1;}
#mg1:active,#mg2:active,#mg3:active,#mg4:active,#mg5:active,#mg6:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw;}
--></style>