• Paravent vertical

    4 images de 800x600px, à survoler dans un montage de 800x600px

     

     

     

     


    Code adresses en gras.

    <div style="height: 600px; width: 800px; border: 1px solid black; background: url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/08/dogplane.jpg'); margin: 10px auto;">
    <p id="per1">&nbsp;</p>
    <p id="per2">&nbsp;</p>
    <p id="per3">&nbsp;</p>
    <p id="per4">&nbsp;</p>
    </div>
    <style><!--
    #per1{transition:all 1s linear;position:absolute; width:338px; height:500px; float:left; border:1px solid black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/08/DSCN4237.JPG'); transform:translate(-30px,50px) perspective(1000px) rotatey(60deg);}
    #per2{transition:all 1s linear;position:absolute; width:338px; height:500px; float:left; border:1px solid black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/08/DSCN4252.JPG'); transform:translate(120px,50px) perspective(1000px) rotatey(-60deg);}
    #per3{transition:all 1s linear;position:absolute; width:338px; height:500px; float:left; border:1px solid black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/08/DSCN4265.JPG'); transform:translate(320px,50px) perspective(1000px) rotatey(60deg);}
    #per4{transition:all 1s linear;position:absolute; width:338px; height:500px; float:left; border:1px solid black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/08/DSCN4269.JPG'); transform:translate(470px,50px) perspective(1000px) rotatey(-60deg);}
    #per1:hover{transform:translate(0px,0px) perspective(10000px) rotatey(0deg); width:800px;height:600px; z-index:5;}
    #per2:hover{transform:translate(0px,0px) perspective(10000px) rotatey(0deg); width:800px;height:600px; z-index:5;}
    #per3:hover{transform:translate(0px,0px) perspective(10000px) rotatey(0deg); width:800px;height:600px; z-index:5;}
    #per4:hover{transform:translate(0px,0px) perspective(10000px) rotatey(0deg); width:800px;height:600px; z-index:5;}
    --></style>