• 16.01.2024

    7 images en 800x600px déjà publiées.

    Survol

     

     

     

     

     

     

     

     

    <div style="width: 800px; height: 600px; margin: 2vh auto; text-align: left;">
    <p id="fl0">Survol</p>
    <p id="fl1" class="fl">&nbsp;</p>
    <p id="fl2" class="fl">&nbsp;</p>
    <p id="fl3" class="fl">&nbsp;</p>
    <p id="fl4" class="fl">&nbsp;</p>
    <p id="fl5" class="fl">&nbsp;</p>
    <p id="fl6" class="fl">&nbsp;</p>
    <p id="fl7" class="fl">&nbsp;</p>
    </div>
    <style><!--
    #fl0{position:absolute; z-index:1; width:100px; background:rgba(0,0,0,0.5); text-align:center; font-size:20px; color:white; text-shadow:1px 1px black; transform:translate(350px,10px);}
    .fl{position:absolute; z-index:1; border:4px ridge white; box-shadow:4px 4px 8px black; background-size:800px 600px; transition:all 1s linear;}
    #fl1{box-sizing:border-box; width:100px; height:500px; background:url('http://ekladata.com/lEAI9k8YOR3OR8HGflqNjbqFGx0.jpg'); background-position:-20px -50px; transform:translate(20px,50px) perspective(200px) rotatey(20deg);}
    #fl2{box-sizing:border-box; width:90px; height:410px; background:url('http://ekladata.com/b1R29v-neTq8E3MExFelGEq9O08.jpg'); background-position:-145px -95px; transform:translate(145px,95px) perspective(200px) rotatey(20deg);}
    #fl3{box-sizing:border-box; width:80px; height:340px; background:url('http://ekladata.com/n_slI4yqNi1rFm38_ZzQrZ28Oys.jpg'); background-position:-260px -130px; transform:translate(260px,130px) perspective(200px) rotatey(20deg);}
    #fl4{box-sizing:border-box; width:70px; height:310px; background:url('http://ekladata.com/cterMSuI8dTtchXFgWT9G33t4T0.jpg'); background-position:-365px -145px; transform:translate(365px,145px);}
    #fl5{box-sizing:border-box; width:80px; height:340px; background:url('http://ekladata.com/xv5gm0UEcZb1elrcyCN9hkaQAyA.jpg'); background-position:-460px -130px; transform:translate(460px,130px) perspective(200px) rotatey(-20deg);}
    #fl6{box-sizing:border-box; width:90px; height:410px; background:url('http://ekladata.com/_HmylnKujtz7nxNkPKuib9oEUiQ.jpg'); background-position:-565px -95px; transform:translate(565px,95px) perspective(200px) rotatey(-20deg);}
    #fl7{box-sizing:border-box; width:100px; height:500px; background:url('http://ekladata.com/EdgzEiOO3XcszXBDnMrHvEx79Is.jpg'); background-position:-680px -50px; transform:translate(680px,50px) perspective(200px) rotatey(-20deg);}

    #fl1:hover,#fl2:hover,#fl3:hover,#fl4:hover,#fl5:hover,#fl6:hover,#fl7:hover{z-index:10; background-position:0px 0px; background-size:800px 600px; width:800px; height:600px; transform:translate(0px,0px) perspective(2000px) rotatey(0deg);}
    --></style>