• Mont.14.4.23

    6 images au ratio 16/9, en 1000x563px à remplacer par vos images.

    SURVOL

     

     

     

     

     

     


    <div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left;">
    <p id="zn0">SURVOL</p>
    <p id="zn1" class="zn">&nbsp;</p>
    <p id="zn2" class="zn">&nbsp;</p>
    <p id="zn3" class="zn">&nbsp;</p>
    <p id="zn4" class="zn">&nbsp;</p>
    <p id="zn5" class="zn">&nbsp;</p>
    <p id="zn6" class="zn">&nbsp;</p>
    </div>
    <style><!--
    #zn0{position:absolute; z-index:1; width:150px; font-size:30px; color:coral; text-shadow:1px 1px black; transform:translate(425px,50px);}
    .zn{position:absolute; z-index:1; border:4px solid white; filter:hue-rotate(240deg); transition:all 1s;}
    #zn1{box-sizing:border-box; background:url('http://ekladata.com/GMxP8nIMOv5ENKZJAwX2pqDqlXg.jpg'); background-size:1000px 563px; background-position:0px -63px; width:400px; height:500px; transform-origin:bottom left; transform:translate(0px,63px) perspective(1500px) rotatey(60deg);}
    #zn2{box-sizing:border-box; background:url('http://ekladata.com/DA6S60Zxv9ajs1ltE94qhKv5LIA.jpg'); background-size:1000px 563px; background-position:-170px -163px; width:400px; height:400px; transform-origin:bottom left; transform:translate(170px,163px) perspective(1500px) rotatey(60deg);}
    #zn3{box-sizing:border-box; background:url('http://ekladata.com/MLLunTSWrYGl8R9BvLoUodhjh44.jpg'); background-size:1000px 563px; background-position:-335px -240px; width:400px; height:323px; transform-origin:bottom left; transform:translate(335px,240px) perspective(1500px) rotatey(60deg);}
    #zn4{box-sizing:border-box; background:url('http://ekladata.com/lYXaqs1TNm79tZBCn-8J2dYY0W8.jpg'); background-size:1000px 563px; background-position:-262px -240px; width:400px; height:323px; transform-origin:bottom right; transform:translate(262px,240px) perspective(1500px) rotatey(-60deg);}
    #zn5{box-sizing:border-box; background:url('http://ekladata.com/H_ez3Q8zI1yI6VG0hZAl8XwoOdc.jpg'); background-size:1000px 563px; background-position:-430px -163px; width:400px; height:400px; transform-origin:bottom right; transform:translate(430px,163px) perspective(1500px) rotatey(-60deg);}
    #zn6{box-sizing:border-box; background:url('http://ekladata.com/s2JkEDcjvrqE61VmPDkk7YCWPeg.jpg'); background-size:1000px 563px; background-position:-600px -63px; width:400px; height:500px; transform-origin:bottom right; transform:translate(600px,63px) perspective(1500px) rotatey(-60deg);}
    #zn1:hover,#zn2:hover,#zn3:hover,#zn4:hover,#zn5:hover,#zn6:hover{z-index:5; background-position:0px 0px; width:1000px; height:563px; transform:translate(0px,0px) perspective(15000px) rotatey(0deg); filter:hue-rotate(0deg);}
    --></style>