• Exemple 194

    5 images au ratio 16/9. 

    Survol

     

     

     

     

     

    <div style="width: 1000px; height: 562px; margin: 5px auto;">
    <p id="gout0">Survol</p>
    <p id="gout1" class="gout">&nbsp;</p>
    <p id="gout2" class="gout">&nbsp;</p>
    <p id="gout3" class="gout">&nbsp;</p>
    <p id="gout4" class="gout">&nbsp;</p>
    <p id="gout5" class="gout">&nbsp;</p>
    </div>
    <style><!--
    #gout0{position:absolute; z-index:1; width:100px; font-size:30px; color:coral; text-shadow:2px 2px black; transform:translate(50px,0px);}
    .gout{position:absolute; z-index:1; border:6px groove white; transition:all 1s linear;}
    #gout1{box-sizing:border-box; background:url('http://ekladata.com/K2Zp-ete3x4DqtH2ETbMKVdvSU4.jpg');background-size:1000px 562px; background-position:-50px -80px; width:800px; height:400px; transform-origin:center left; transform:translate(50px,80px) perspective(300px) rotatey(45deg);}
    #gout2{box-sizing:border-box; background:url('http://ekladata.com/VUL0RNkXgt5WjQgOprbMQZkxiaQ.jpg');background-size:1000px 562px; background-position:-150px -80px; width:800px; height:400px; transform-origin:center right; transform:translate(150px,80px) perspective(300px) rotatey(-45deg);}
    #gout3{box-sizing:border-box; background:url('http://ekladata.com/IWYH2a1IX3juf2pHHHcnFmWEZFw.jpg');background-size:1000px 562px; background-position:-200px 0px; width:600px; height:400px; transform-origin:top center; transform:translate(200px,0px) perspective(400px) rotatex(-45deg);}
    #gout4{box-sizing:border-box; background:url('http://ekladata.com/dDisPs-PM-mtbz4J24ucyDEyKdg.jpg');background-size:1000px 562px; background-position:-200px -150px; width:600px; height:400px; transform-origin:bottom center; transform:translate(200px,150px) perspective(400px) rotatex(45deg);}
    #gout5{box-sizing:border-box; background:url('http://ekladata.com/TgGk1K3FuMt1a-lyRLPovHoSCDY.jpg');background-size:1000px 562px; background-position:-300px -200px; width:400px; height:150px; transform:translate(300px,200px);}
    #gout1:hover,#gout2:hover,#gout3:hover,#gout4:hover,#gout5:hover{z-index:5; width: 1000px; height: 562px; background-position:0px 0px; transform:translate(0px,0px) perspective(3000px) rotatey(0deg) rotatex(0deg);}
    --></style>