• Exemple 213

     

     

    Survol

     

     

     

     

     

     

     

     

     


    <div style="width: 1600px; height: 900px; margin: 5px auto; border: 1px solid black;">

    <p id="fd">&nbsp;</p>

    <p id="blc0">Survol</p>

    <p id="blc1" class="blc">&nbsp;</p>

    <p id="blc2" class="blc">&nbsp;</p>

    <p id="blc3" class="blc">&nbsp;</p>

    <p id="blc4" class="blc">&nbsp;</p>

    <p id="blc5" class="blc">&nbsp;</p>

    <p id="blc6" class="blc">&nbsp;</p>

    <p id="blc7" class="blc">&nbsp;</p>

    <p id="blc8" class="blc">&nbsp;</p>

    <p id="blc9" class="blc">&nbsp;</p>

    </div>

     

    <style><!--

    #fd{position:absolute; z-index:1; width:1600px; height:900px; background:url('http://ekladata.com/3UzNURRznve7n3uy1JLFw4eYNqQ.jpg'); background-size:1600px 900px; filter:grayscale(1); opacity:0.5;}

    #blc0{position:absolute; z-index:1; text-align:center; width:200px; font-size:30px; color:lavender; text-shadow:2px 2px black; transform:translate(700px,10px);}

    .blc{position:absolute; z-index:1; box-shadow:inset 0px 0px 8px 6px #173B0B; transition:all 1s linear;}

    #blc1{box-sizing:border-box; width:150px; height:700px; background:url('http://ekladata.com/uwU_ofYktzRJSj6YjCsMAzapJIA.jpg');; background-size:1600px 900px; background-position:-725px -200px; transform:translate(725px,200px);}

    #blc2{box-sizing:border-box; width:100px; height:600px; background:url('http://ekladata.com/dW8jdKZJdvWdAKBiUhv2orkRPPs.jpg'); background-size:1600px 900px; background-position:-550px -295px; transform:translate(550px,295px) rotate(15deg);}

    #blc3{box-sizing:border-box; width:80px; height:500px; background:url('http://ekladata.com/OJ0qr-VtRq6K4RN7yjL1TsPMPd0.jpg'); background-size:1600px 900px; background-position:-405px -355px; transform:translate(405px,405px) rotate(25deg);}

    #blc4{box-sizing:border-box; width:50px; height:400px; background:url('http://ekladata.com/vCCozTJeUjtrsnzsaNU_GLkR7TY.jpg'); background-size:1600px 900px; background-position:-285px -420px; transform:translate(285px,520px) rotate(35deg);}

    #blc5{box-sizing:border-box; width:25px; height:300px; background:url('http://ekladata.com/AZSxS0D7tLTCruc-rTdAtLeRrSo.jpg'); background-size:1600px 900px; background-position:-175px -535px; transform:translate(175px,635px) rotate(45deg);}

    #blc6{box-sizing:border-box; width:100px; height:600px; background:url('http://ekladata.com/Ano73rEXUqqxwRHtXPoKZAfg-hw.jpg'); background-size:1600px 900px; background-position:-950px -295px; transform:translate(950px,295px) rotate(-15deg);}

    #blc7{box-sizing:border-box; width:80px; height:500px; background:url('http://ekladata.com/ZI_yW8v8kTh3mfhuireSk-scF-g.jpg'); background-size:1600px 900px; background-position:-1115px -355px; transform:translate(1115px,405px) rotate(-25deg);}

    #blc8{box-sizing:border-box; width:50px; height:400px; background:url('http://ekladata.com/lYBUMgN2BwTd5bp8TxVC6gsipSU.jpg'); background-size:1600px 900px; background-position:-1265px -420px; transform:translate(1265px,520px) rotate(-35deg);}

    #blc9{box-sizing:border-box; width:25px; height:300px; background:url('http://ekladata.com/Fd4gs9-3osagvldeZ95isOsOKWs.jpg'); background-size:1600px 900px; background-position:-1400px -535px; transform:translate(1400px,635px) rotate(-45deg);}

    #blc1:hover,#blc2:hover,#blc3:hover,#blc4:hover,#blc5:hover,#blc6:hover,#blc7:hover,#blc8:hover,#blc9:hover{z-index:5; width:1600px; height:900px; background-position:0px 0px; transform:translate(0px,0px) rotate(0deg);}

    --></style>