Art.06.5.21

 Un montage qui pourrait se nommer :"le placard" !
Survolez chaque ensemble (4) de 2 portes puis cliquez maintenu sur l'image qui apparaît.

Montage en 1000px par 562px (16/9).

4 boutons invisibles de 500px par 281px.

4 ensembles de 2 volets.

4 images en 1000px par 562px

Les boutons invisibles sont placés en premier plan (z-index:10), au-dessus des volets, eux-mêmes au dessus des images.

Le survol d'un bouton anime un ensemble de 2 volets qui s'ouvrent et laissent apparaître la partie d'une image, selon la position dans le montage (background-position).

Le clic maintenu sur le bouton fait passer l'image en second plan (z-index:5;) et s'agrandir pour remplir le montage en partant de la partie visible.

<div style="width: 1000px; height: 562px; margin: 20px auto;">
<p id="sec1a" class="sec">&nbsp;</p>
<p id="sec1b" class="sec">&nbsp;</p>
<p id="sec1c" class="sec">&nbsp;</p>
<p id="sec1d" class="sec">&nbsp;</p>
<p id="vol1a" class="vol">&nbsp;</p>
<p id="vol2a" class="vol">&nbsp;</p>
<p id="vol1b" class="vol">&nbsp;</p>
<p id="vol2b" class="vol">&nbsp;</p>
<p id="vol1c" class="vol">&nbsp;</p>
<p id="vol2c" class="vol">&nbsp;</p>
<p id="vol1d" class="vol">&nbsp;</p>
<p id="vol2d" class="vol">&nbsp;</p>
<p id="mg1" class="mg">&nbsp;</p>
<p id="mg2" class="mg">&nbsp;</p>
<p id="mg3" class="mg">&nbsp;</p>
<p id="mg4" class="mg">&nbsp;</p>
</div>

<style><!--
.sec{position:absolute; z-index:10; width:500px; height:281px;}
#sec1a{transform:translate(0px,0px);}
#sec1b{transform:translate(500px,0px);}
#sec1c{transform:translate(500px,281px);}
#sec1d{transform:translate(0px,281px);}
.vol{position:absolute; z-index:2; width:250px; height:281px; border:6px ridge brown; background:url('http://ekladata.com/uReCxkJnv46giiBtS-c6ovfN6CY/img728.gif'); transition:all 1s linear;}
#vol1a{box-sizing:border-box; transform:translate(0px,0px) perspective(1000px) rotatey(0deg); transform-origin:left center;}
#vol2a{box-sizing:border-box; transform:translate(250px,0px) perspective(1000px) rotatey(0deg); transform-origin:right center;}
#vol1b{box-sizing:border-box; transform:translate(500px,0px) perspective(1000px) rotatey(0deg); transform-origin:left center;}
#vol2b{box-sizing:border-box; transform:translate(750px,0px) perspective(1000px) rotatey(0deg); transform-origin:right center;}
#vol1c{box-sizing:border-box; transform:translate(500px,281px) perspective(1000px) rotatey(0deg); transform-origin:left center;}
#vol2c{box-sizing:border-box; transform:translate(750px,281px) perspective(1000px) rotatey(0deg); transform-origin:right center;}
#vol1d{box-sizing:border-box; transform:translate(0px,281px) perspective(1000px) rotatey(0deg); transform-origin:left center;}
#vol2d{box-sizing:border-box; transform:translate(250px,281px) perspective(1000px) rotatey(0deg); transform-origin:right center;}
.mg{position:absolute; z-index:1; width:500px; height:281px; transition:all 1s linear;}
#mg1{background:url('http://ekladata.com/BpkRyPGEfDVKdIcP3sQJDWGPHxU.jpg'); background-size:1000px 562px; background-position:0px 0px; transform:translate(0px,0px);}
#mg2{background:url('http://ekladata.com/g5QXP-HBrZyAvfjuunZih-Kphek.jpg'); background-size:1000px 562px; background-position:-500px 0px; transform:translate(500px,0px);}
#mg3{background:url('http://ekladata.com/X15mCOW8HwBmm0XMvKSSK9J-mZ8.jpg'); background-size:1000px 562px; background-position:-500px -281px; transform:translate(500px,281px);}
#mg4{background:url('http://ekladata.com/dCem1Hk73CPtqQ7H_9Xq2DxC3d8.jpg'); background-size:1000px 562px; background-position:0px -281px; transform:translate(0px,281px);}
#sec1a:hover ~ #vol1a{transform:translate(0px,0px) perspective(100px) rotatey(90deg);}
#sec1a:hover ~ #vol2a{transform:translate(250px,0px) perspective(100px) rotatey(-90deg);}
#sec1b:hover ~ #vol1b{transform:translate(500px,0px) perspective(100px) rotatey(90deg);}
#sec1b:hover ~ #vol2b{transform:translate(750px,0px) perspective(100px) rotatey(-90deg);}
#sec1c:hover ~ #vol1c{transform:translate(500px,281px) perspective(100px) rotatey(90deg);}
#sec1c:hover ~ #vol2c{transform:translate(750px,281px) perspective(100px) rotatey(-90deg);}
#sec1d:hover ~ #vol1d{transform:translate(0px,281px) perspective(100px) rotatey(90deg);}
#sec1d:hover ~ #vol2d{transform:translate(250px,281px) perspective(100px) rotatey(-90deg);}
#sec1a:active ~ #mg1,#sec1b:active ~ #mg2,#sec1c:active ~ #mg3,#sec1d:active ~ #mg4{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,0px);}
--></style>