Montage 340

Montage en 900x506px; 5 images au ratio 16/9, avec ouverture centrale, pour changer !

<div style="width: 900px; height: 506px; margin: 10px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/tGPwFNZEGyFd-HB9GNXA5ZQz3Tk.jpg'); background-size: cover;">
<p id="fgh0">Survol</p>
<p id="fgh1" class="fgh">&nbsp;</p>
<p id="fgh2" class="fgh">&nbsp;</p>
<p id="fgh3" class="fgh">&nbsp;</p>
<p id="fgh4" class="fgh">&nbsp;</p>
<p id="dem1a" class="dem">&nbsp;</p>
<p id="dem1b" class="dem">&nbsp;</p>
<p id="dem2a" class="dema">&nbsp;</p>
<p id="dem2b" class="dema">&nbsp;</p>
<p id="dem3" class="demb">&nbsp;</p>
<p id="dem4">&nbsp;</p>
</div>

<style><!--
#fgh0{position:absolute; z-index:1; width:80px; height:506px; background:rgba(0,0,0,0.5); text-align:center; font-size:20pxvw; color:white; text-shadow:2px 2px black; transform:translate(820px,0px);}
.fgh{position:absolute; z-index:5; width:40px; height:40px; border-radius:50%; box-shadow:inset -3px -3px 7px black; background:lime;}
#fgh1{transform:translate(840px,50px);}
#fgh2{transform:translate(840px,150px);}
#fgh3{transform:translate(840px,250px);}
#fgh4{transform:translate(840px,350px);}
.dem{position:absolute; z-index:1; width:900px; height:506px; background:url('http://ekladata.com/vnqnWyaa_L5URBXrVEAPzCv_1X0.jpg'); background-size:900px 506px;transition:all 1s linear;}
.dema{position:absolute; z-index:1; width:900px; height:506px; background:url('http://ekladata.com/GIJ3fjXSuJIr3z1qhgx6lHPL2L0.jpg'); background-size:900px 506px;transition:all 1s linear;}
#dem1a{width:0px; height:506px; background-position:-450px 0px; transform:translate(450px, 0px);}
#dem1b{width:0px; height:506px; background-position:-450px 0px; transform:translate(450px, 0px);}
#fgh1:hover ~ #dem1a{width:450px; background-position:0px 0px;transform:translate(0px,0px);}
#fgh1:hover ~ #dem1b{width:450px; background-position:-450px 0px; transform:translate(450px,0px);}
#dem2a{width:900px; height:0px; background-position:0px -253px; transform:translate(0px,253px);}
#dem2b{width:900px; height:0px; background-position:0px -253px; transform:translate(0px,253px);}
#fgh2:hover ~ #dem2a{height:253px; background-position:0px 0px; transform:translate(0px,0px);}
#fgh2:hover ~ #dem2b{height:253px; background-position:0px -253px; transform:translate(0px,253px);}
#dem3{position:absolute; z-index:1; width:0px; height:0px; background:url('http://ekladata.com/d143C2ZzxRrAXx_8_AYjHa_KBtE.jpg'); background-size:900px 506px; background-position:-450px -253px; transform:translate(450px,253px); transition:all 1s linear;}
#fgh3:hover ~ #dem3{width:900px; height:506px; background-position:0px 0px; transform:translate(0px,0px);}
#dem4{position:absolute; z-index:1; width:900px; height:0px; background:url('http://ekladata.com/1wXwlh7VH903vsfu9hUPXC3cm4M.jpg'); background-size:900px 506px; background-position:0px -506px; transform:translate(0px,506px); transform-origin:bottom center; transition:all 1s linear;}
#fgh4:hover ~ #dem4{height:506px; background-position:0px 0px;transform:translate(0px,0px);}
--></style>