-
Dépliant
Dans cet exemple, 3 images au ratio 16/9 en 1200x675px.
SURVOL
<div style="width: 1200px; height: 675px; border: 6px ridge grey; margin: 50px auto; background: url('http://ekladata.com/_MnFZ-Gzlevc1PIta7kt4j5PEoY/00044.jpg');">
<p id="dpl0">SURVOL</p>
<p id="dpl1a" class="dpla"> </p>
<p id="dpl2a" class="dpla"> </p>
<p id="dpl1b" class="dplb"> </p>
<p id="dpl2b" class="dplb"> </p>
<p id="dpl3b" class="dplb"> </p>
<p id="dpl1c" class="dplc"> </p>
<p id="dpl2c" class="dplc"> </p>
</div>
<style><!--
#dpl0{position:absolute; width:30px; height:300px; font-size:30px; transform:translate(370px,170px);}
.dpla{position:absolute; background:url('http://ekladata.com/YzlOc6BVMk12LNLrcr6iRYGoq5s.jpg'); background-size:1200px 675px; filter:grayscale(1);}
#dpl1a{width:350px; height:675px; transform:translate(0px,0px); background-position:0px 0px; transition:filter 1s 1.5s;}
#dpl2a{z-index:2;width:850px; height:675px; transform-origin:left center; transform:translate(350px,0px) perspective(200px) rotatey(90deg) ; background-position:-350px 0px; transition:transform 1s 0.5s,filter 1s 1.5s;}
.dplb{position:absolute; background:url('http://ekladata.com/9-5C24B3kdfme2ori_6gO4NVDkw.jpg'); background-size:1200px 675px; filter:grayscale(1);}
#dpl1b{width:350px; height:675px; transform:translate(425px,0px); background-position:-425px 0px; transition:filter 1s 1.5s;}
#dpl2b{z-index:2;width:425px; height:675px; transform-origin:right center; transform:translate(0px,0px) perspective(200px) rotatey(-90deg) ; background-position:0px 0px; transition:transform 1s 0.5s,filter 1s 1.5s;}
#dpl3b{z-index:2;width:425px; height:675px; transform-origin:left center; transform:translate(775px,0px) perspective(200px) rotatey(90deg) ; background-position:-775px 0px; transition:transform 1s 0.5s,filter 1s 1.5s;}
.dplc{position:absolute; background:url('http://ekladata.com/CzL99NzKNzw6MOp4rQ9_OgCcRNM.jpg'); background-size:1200px 675px; filter:grayscale(1);}
#dpl1c{width:350px; height:675px; transform:translate(850px,0px); background-position:-850px 0px; transition:filter 1s 1.5s;}
#dpl2c{z-index:2;width:850px; height:675px; transform-origin:right center; transform:translate(0px,0px) perspective(200px) rotatey(-90deg) ; background-position:0px 0px; transition:transform 1s 0.5s,filter 1s 1.5s;}#dpl1a:hover,#dpl1b:hover,#dpl1c:hover{filter:grayscale(0);}
#dpl1a:hover ~ #dpl2a{z-index:5;transform:translate(350px,0px) perspective(2000px) rotatey(0deg) ; filter:grayscale(0);}
#dpl1b:hover ~ #dpl2b{z-index:5;transform:translate(0px,0px) perspective(2000px) rotatey(0deg) ; filter:grayscale(0);}
#dpl1b:hover ~ #dpl3b{z-index:5;transform:translate(775px,0px) perspective(2000px) rotatey(0deg) ; filter:grayscale(0);}
#dpl1c:hover ~ #dpl2c{z-index:5;transform:translate(0px,0px) perspective(2000px) rotatey(0deg) ; filter:grayscale(0);}
--></style>