• Exemple 231

    Survol 

     

     

     

     

     

    <div style="width: 1000px; height: 563px; margin: 5px auto;">
    <p id="pps1" class="pps">&nbsp;</p>
    <p id="pps2" class="pps">&nbsp;</p>
    <p id="pps3" class="pps">&nbsp;</p>
    <p id="pps4" class="pps">&nbsp;</p>
    <p id="pps5" class="ppsa">&nbsp;</p>
    </div>


    <style><!--
    .pps{position:absolute; z-index:1; width:1000px; height:250px; transition:all 1s linear;}
    #pps1{background:url('http://ekladata.com/9lTza-IMETLzCc5I6F9ovEEVl10.jpg'); background-size:1000px 563px; transform-origin:top left; transform:translate(0px,0px) perspective(500px) rotatey(30deg);}
    #pps2{background:url('http://ekladata.com/8URlyNhBf0_pMK1RL-gzgg6Hjk8.jpg'); background-size:1000px 563px; transform-origin:top right; transform:translate(0px,0px) perspective(500px) rotatey(-30deg);}
    #pps3{background:url('http://ekladata.com/uXvU1oF0Wck-1MbBcvzrnM8LUDY.jpg'); background-size:1000px 563px; background-position:0px -313px; transform-origin:bottom right; transform:translate(0px,313px) perspective(500px) rotatey(-30deg);}
    #pps4{background:url('http://ekladata.com/oYpNDnshzOfmX96wsH0U7x-_pH0.jpg'); background-size:1000px 563px; background-position:0px -313px; transform-origin:bottom left; transform:translate(0px,313px) perspective(500px) rotatey(30deg);}
    .ppsa{position:absolute; z-index:1; width:1000px; height:563px; transition:all 1s linear;}
    #pps5{background:url('http://ekladata.com/Ik613BGFo1w39SHI561il3D9UDs.jpg'); background-size:1000px 563px; z-index:1; clip-path:polygon(0% 50%, 50% 25%, 100% 50%, 50% 75%);}
    #pps1:hover,#pps2:hover,#pps3:hover,#pps4:hover{z-index:5; height:563px; background-position:0px 0px;transform:translate(0px,0px) perspective(8000px) rotatey(0deg);}
    #pps5:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
    --></style>