• Fleurs

    5 images en 800px par 450px; ratio 16/9 dans un montage de 850px par 500px.

    Survol des parties grises en veillant à conservant votre curseur sur l'image animée.

     

     

     

     

     


    <div style="position: relative; overflow: hidden; width: 850px; height: 500px; margin: 30px auto; text-align: left; ">
    <p id="fl0">&nbsp;</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>
    </div>
    <style><!--
    #fl0{position:absolute; z-index:1;box-sizing:border-box; width:800px; height:450px; border:4px ridge white; background:url('http://ekladata.com/C_s-0nTuiDpklSrFT_rhLB_xGRg.jpg'); background-size:800px 450px; transform:translate(25px,25px);}
    .fl{position:absolute; z-index:5; width:800px; height:450px; border:4px ridge white; transition: all 1s 0s, filter 1s 1.5s;}
    #fl1{box-sizing:border-box;background:url('http://ekladata.com/XaHxW37z3yS9xCoP_rZs0tiCqcA.jpg'); background-size:800px 450px; transform:translate(-775px,25px); filter:grayscale(1);}
    #fl2{box-sizing:border-box;background:url('http://ekladata.com/qNKJWs76mYcV3zcTGT0Vd8eUvm8.jpg'); background-size:800px 450px; transform:translate(25px,-425px); filter:grayscale(1);}
    #fl3{box-sizing:border-box;background:url('http://ekladata.com/oldJsANhEvwOIfsekVRs_2phmPw.jpg'); background-size:800px 450px; transform:translate(825px,25px); filter:grayscale(1);}
    #fl4{box-sizing:border-box;background:url('http://ekladata.com/LKhTmhXTTKqwU__smTSArsipYAU.jpg'); background-size:800px 450px; transform:translate(25px,475px); filter:grayscale(1);}
    #fl1:hover,#fl2:hover,#fl3:hover,#fl4:hover{transform:translate(25px,25px); filter:grayscale(0);}
    --></style>