• Exemple 193

    3 images au ratio 16/9.

    Survolez le montage pour ouvrir les volets puis clic maintenu dessus pour les refermer. 

     

     

     

     

     

    <div style="width: 1000px; height: 562px; border: 1px solid black; margin: 5px auto; background: url('http://ekladata.com/bjMpB2zny0gtiKKu_TXyXUUHFWE.jpg'); background-size: cover;">
    <p id="cdd">&nbsp;</p>
    <p id="vlg1" class="vlg">&nbsp;</p>
    <p id="vld1" class="vlg">&nbsp;</p>
    <p id="vlg2" class="vlga">&nbsp;</p>
    <p id="vld2" class="vlga">&nbsp;</p>
    </div>

    <style><!--
    #cdd{position:absolute; z-index:5; width:1000px; height:562px;}
    .vlg{position:absolute; z-index:1; width:500px; height:562px; background:url('http://ekladata.com/cTecpGXuXJyl7l9BxVkW-yCxkjo.jpg'); background-size:1000px 562px; transition:all 1s linear;}
    #vlg1{background-position:0px 0px; transform-origin:center left; transform:translate(0px,0px) perspective(1000px) rotatey(0deg);}
    #vld1{background-position:-500px 0px; transform-origin:center right; transform:translate(500px,0px) perspective(1000px) rotatey(0deg);}
    .vlga{position:absolute; z-index:2; width:500px; height:562px; background:url('http://ekladata.com/VPm-43rDgKswhMQQUzJnwAPUx58.jpg'); background-size:1000px 562px; transition:all 1s linear;}
    #vlg2{background-position:0px 0px; transform-origin:center left; transform:translate(0px,0px) perspective(500px) rotatey(90deg);}
    #vld2{background-position:-500px 0px; transform-origin:center right; transform:translate(500px,0px) perspective(500px) rotatey(-90deg);}

    #cdd:hover ~ #vlg1{transform:translate(0px,0px) perspective(500px) rotatey(90deg);}
    #cdd:hover ~ #vld1{transform:translate(500px,0px) perspective(500px) rotatey(-90deg);}
    #cdd:active ~ #vlg2{transform:translate(0px,0px) perspective(1000px) rotatey(0deg);}
    #cdd:active ~ #vld2{transform:translate(500px,0px) perspective(1000px) rotatey(0deg);}
    --></style>