• 05/10/2023

    4 images au ratio 16/9, à survoler.

     

     

     

     


    <div style="width: 1100px; height: 619px; margin: 30px auto; text-align: left;">
    <p id="trf1" class="trf">&nbsp;</p>
    <p id="trf2" class="trf">&nbsp;</p>
    <p id="trf3" class="trfa">&nbsp;</p>
    <p id="trf4" class="trfa">&nbsp;</p>
    </div>
    <style><!--
    .trf{position:absolute; z-index:1; width:1100px; height:200px; box-shadow:inset 4px 4px 8px black; transition:all 1s;}
    #trf1{transform-origin:center left; transform:translate(170px,200px) perspective(500px) rotatey(45deg);border-radius:50% 100% 100% 50%; background:url('http://ekladata.com/9qyV7xcsId1tJs6B8B9lfHXf-FE.jpg'); background-position: -170px -200px; background-size:1100px 619px;}
    #trf2{transform-origin:center right; transform:translate(-160px,200px) perspective(500px) rotatey(-45deg);border-radius:100% 50% 50% 100%; background:url('http://ekladata.com/f6fk0Z1drxD5p42sQnYqh2CFv-g.jpg');background-position:160px -200px; background-size:1100px 619px; }
    .trfa{position:absolute; z-index:1; width:150px; height:350px; box-shadow:inset 4px 4px 8px black; transition:all 1s;}
    #trf3{transform-origin:center top; transform:translate(480px,0px) perspective(8000px) rotatex(40deg); border-radius:50% 50% 100% 100%; background:url('http://ekladata.com/Owzt6XmuQSkAcr3mFOgTI6iPHjM.jpg');background-position:-480px 0px; background-size:1100px 619px; }
    #trf4{transform-origin:center bottom ; transform:translate(480px,270px) perspective(8000px) rotatex(30deg); border-radius:100% 100% 50% 50%; background:url('http://ekladata.com/Fakcx0pR-uMuqU0vM1F-wsV1H68.jpg'); background-position: -480px -270px; background-size:1100px 619px;}
    #trf1:hover,#trf2:hover,#trf3:hover,#trf4:hover{z-index:5; width:1100px; height:619px; border-radius:0%; transform:translate(0px,0px) perspective(5000px) rotatey(0deg)rotatex(0deg);background-position: 0px 0px;}
    --></style>