• 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">&nbsp;</p>
    <p id="dpl2a" class="dpla">&nbsp;</p>
    <p id="dpl1b" class="dplb">&nbsp;</p>
    <p id="dpl2b" class="dplb">&nbsp;</p>
    <p id="dpl3b" class="dplb">&nbsp;</p>
    <p id="dpl1c" class="dplc">&nbsp;</p>
    <p id="dpl2c" class="dplc">&nbsp;</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>